title: Full Screen Video Background with content below the fold
body: <p>Working on implementing a full screen video background with content under the fold. </p>
  
  <p>So far I have been able to get the full screen video working without issue. The problem is I have been unable to figure out how to add content under the video. Aka the video should stop under the fold:</p>
  
  <p>GOAL: <a href="http://www.awesomescreenshot.com/0fa4atfpec" rel="nofollow noreferrer">http://www.awesomescreenshot.com/0fa4atfpec</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  
  &lt;div id='videoBG' class="row"&gt;
  
  &lt;video autoplay loop muted poster="screenshot.jpg" id="background"&gt;
  &lt;source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"&gt;
  &lt;/video&gt;
  
  &lt;p id='mainHeader'&gt; Header Title &lt;/p&gt;
  
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="container-fluid"&gt;
  &lt;div class='row'&gt; 
  
  &lt;h1&gt; Start of the second section below the video&lt;/h1&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#background {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: -100;
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      background: url(polina.jpg) no-repeat;
      background-size: cover;
  }
  </code></pre>