title: How to handle full screen, responsive background video?
body: <p>I am trying to set a background video to full screen.</p>
  
  <p>I can achieve this with <code>height: 100vh;</code> and <code>width: 100%;</code> but as soon as the ratio changes from 16:9, I start to get whitespace.</p>
  
  <p>I have also tried using object <code>object-fit: cover;</code> but this seems to overflow all over the place and I struggle to contain it. It also isn't as widely supported (I.E 11 and and edge 15 don't support it).</p>
  
  <p>I'm not sure if I am complicating things using bootstrap 4 as well.</p>
  
  <p>My HTML is layed out like so </p>
  
  <pre><code>&lt;div class="container-fluid home-page"&gt;
  
    &lt;video playsinline autoplay muted loop poster="polina.jpg" id="bgvid"&gt;
        &lt;source src="/wp-content/themes/_underscores/assets/Placeholder-Video.mp4" type="video/mp4"&gt;
      &lt;/video&gt;
  
      &lt;div class="row clients"&gt;
  
          &lt;div class="client-slider col-12"&gt;
  
              &lt;?php foreach($clients as $key =&gt; $client) : ?&gt;
                  &lt;div class="client-logo" style="background-image: url(&lt;?php echo $client-&gt;featured_image; ?&gt;)"&gt;&lt;/div&gt;   
              &lt;?php endforeach; ?&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;              
  
      &lt;div class="row"&gt;
  
          &lt;div class="col-md-6 col-xs-12 info-text"&gt;
              &lt;h3&gt;Title&lt;/h3&gt;
              &lt;p&gt;Content....&lt;/p&gt;
              &lt;a href="#" class="button blue no-margin"&gt;SEE HOW IT WORKS&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div class="col-md-6 col-xs-12 backgroundg"&gt;
          &lt;/div&gt;
  
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>As soon as I position the video element, everything below it (i.e. .clients) float up to the top because the video element is taken out of the regular document flow. I can give .clients <code>margin-top: 100vh;</code> but then I need to give the video element <code>object-fit: cover;</code> and it floods the whole document as the background. </p>
  
  <p>Just to give you an idea of my css (sass) so far: </p>
  
  <pre><code>video {
    object-fit: cover; 
    width: 100vw;
    height: 100vh;
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .clients{
    margin-top: 100vh;
  }
  </code></pre>
  
  <p>I have been looking at a couple of tutorials like <a href="https://slicejack.com/fullscreen-html5-video-background-css/" rel="nofollow noreferrer">https://slicejack.com/fullscreen-html5-video-background-css/</a> and <a href="http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video" rel="nofollow noreferrer">http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video</a> but I don't think in there example, they have content below the full screen video. </p>
  
  <p>Thanks.</p>