CODEWITHSUNDEEP
htmlcss
maxelcat
maxelcat

Reputation: 1333

Video in background with controls - can't make it work

I have a wordpress site with Easywpvideo in it (which doesn't' offer support)

We want a video to play in the background, but we also want the user to be able to stop start.

We also want some content to flow over the video.

This div is created by the plugin:

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

I have tried various options with .site { position:relative; z-index:1 or 100; }

and this brings the various content of the page into the right position, but of course the video play button isn't clickable

Are we trying to do something that can't be done? IE insert a video into the background of a page, have content on top of it BUT we able to control the video?

Upvotes: 0

Views: 48

Answers (1)

Vel
Vel

Reputation: 9331

Your code should be like this. 

       <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>

Upvotes: 1

Related Questions