HTML5 Section Background Video - Fullscreen

Question

So, I was using this page for reference: Fullscreen HTML5 Section Background Video and a blog post: http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video However, in the stackoverflow, the final solution is never posted, and I was unable to get the best answer to work in my case. I created a codepen using example images containing all my html and css: http://codepen.io/emmajean/pen/nyhFL

I'm trying to get the video to be the first image that shows, and to be the "background" for the words PROTECT AND GROW YOUR BRANDS WITH OUR PRODUCT Search now. The second section is a static picture background that is already working fine, though obviously not showing up as a separate section, that section should have the "Worry no more Safegaurd..." text. HTML:

<section class="video-holder">
<!--begin test search background vid-->
 <section class="search-holder">
 <div id="video_container" style="overflow: hidden; background-size: cover;">
  <div class="carousel2-block">
   <h1><br /><br />PROTECT &amp; GROW YOUR <br /> BRANDS WITH OUR PRODUCT</h1>
   <h2>Search now through your favorite brands</h2>
   <video autoplay="autoplay" loop="loop" id="bgvid">
    <source src="http://taxify.co/wp-content/uploads/2014/06/file.mp4" type="video/mp4"/> 
   </video>
  </div>
 </div>
</section>
<!--end test search-->
</section>

CSS:

#video_container {
 bottom: 0;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;
 background: url(polina.jpg) no-repeat;
 min-height: 720px;
}
#bgvid {
 min-width: 100%;
}

Any hints or tips are appreciated!

Answer 1

What you'd need to do is stack the two panels on top of one another.

The issue here is that the subject area of the video doesn't really lend itself to be stretched wide with a short height. Too much focus gets lost.

Perhaps lengthening the height would work better?

In terms of the second panel, use background-size: cover with your desired height instead of loading the image through HTML.

Here's a pen: http://codepen.io/anon/pen/solgw