html - 带控件的后台视频 - 无法正常工作

Question

我有一个带有 Easywpvideo 的 wordpress 网站(不提供支持)

我们希望视频在后台播放，但我们也希望用户能够停止开始。

我们还希望一些内容流过视频。

这个div是由插件创建的:

<div id="video_background_video_0" style="z-index: 0; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; overflow: hidden;">

我尝试过各种选择 。地点 { 职位:相对； z-index:1 或 100；

这会将页面的各种内容带到正确的位置，但是视频播放按钮当然不可点击

我们是否正在尝试做一些无法完成的事情？ IE 将视频插入页面背景，在其顶部有内容但我们可以控制视频？

Answer 1

你的代码应该是这样的。

       <div id="primary" class="content-area">
             <div id="video_background_video_0" style="z-index: 0; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; overflow: hidden;">
            <iframe id="video_background_video_0_yt" style="position: absolute; top: -179px; left: 0px;" frameborder="0" allowfullscreen="1" title="YouTube video player" width="1349" height="759" src="https://www.youtube.com/embed/1CXFhQ33_xs?loop=0&amp;start=0&amp;autoplay=1&amp;controls=0&amp;showinfo=0&amp;wmode=transparent&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;enablejsapi=1&amp;origin=http%3A%2F%2Fwww.onscreencounselling.com"></iframe>
        </div>
        <div id="content" class="site-content" role="main">
            <article id="post-576" class="post-576 page type-page status-publish hentry">
                <header class="entry-header">
                    <h1 class="entry-title">homepage</h1>
                </header><!-- .entry-header -->

                <div class="entry-content">
                    <p>&nbsp;</p>
                    <p>Here is some homepage content</p>
                    <p>And a bit more</p>
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                </div><!-- .entry-content -->

                <footer class="entry-meta">
                </footer><!-- .entry-meta -->
            </article><!-- #post -->
            <div id="comments" class="comments-area">
            </div><!-- #comments -->            
        </div><!-- #content -->
    </div>