title: HTML5 Section Background Video - Fullscreen
body: <p>So, I was using this page for reference: <a href="https://stackoverflow.com/questions/22174073/fullscreen-html5-section-background-video">Fullscreen HTML5 Section Background Video</a>
  and a blog post:
  <a href="http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video" rel="nofollow noreferrer">http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video</a>
  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:
  <a href="http://codepen.io/emmajean/pen/nyhFL" rel="nofollow noreferrer">http://codepen.io/emmajean/pen/nyhFL</a></p>
  
  <p>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:</p>
  
  <pre><code>&lt;section class="video-holder"&gt;
  &lt;!--begin test search background vid--&gt;
   &lt;section class="search-holder"&gt;
   &lt;div id="video_container" style="overflow: hidden; background-size: cover;"&gt;
    &lt;div class="carousel2-block"&gt;
     &lt;h1&gt;&lt;br /&gt;&lt;br /&gt;PROTECT &amp;amp; GROW YOUR &lt;br /&gt; BRANDS WITH OUR PRODUCT&lt;/h1&gt;
     &lt;h2&gt;Search now through your favorite brands&lt;/h2&gt;
     &lt;video autoplay="autoplay" loop="loop" id="bgvid"&gt;
      &lt;source src="http://taxify.co/wp-content/uploads/2014/06/file.mp4" type="video/mp4"/&gt; 
     &lt;/video&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/section&gt;
  &lt;!--end test search--&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#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%;
  }
  </code></pre>
  
  <p>Any hints or tips are appreciated!</p>