带控件的背景视频 - 无法使其正常工作

时间:2015-06-05 10:05:41

标签: html css

我有一个带有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;">

我尝试过各种各样的选择     .site {     位置:相对;     z-index:1或100;     }

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

我们是否正在尝试做一些无法做到的事情? IE将视频插入到页面的背景中,在其上面有内容但是我们能够控制视频吗?

1 个答案:

答案 0 :(得分: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>