How to handle full screen, responsive background video?

Question

I am trying to set a background video to full screen.

I can achieve this with height: 100vh; and width: 100%; but as soon as the ratio changes from 16:9, I start to get whitespace.

I have also tried using object object-fit: cover; 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).

I'm not sure if I am complicating things using bootstrap 4 as well.

My HTML is layed out like so

<div class="container-fluid home-page">

  <video playsinline autoplay muted loop poster="polina.jpg" id="bgvid">
      <source src="/wp-content/themes/_underscores/assets/Placeholder-Video.mp4" type="video/mp4">
    </video>

    <div class="row clients">

        <div class="client-slider col-12">

            <?php foreach($clients as $key => $client) : ?>
                <div class="client-logo" style="background-image: url(<?php echo $client->featured_image; ?>)"></div>   
            <?php endforeach; ?>

        </div>

    </div>              

    <div class="row">

        <div class="col-md-6 col-xs-12 info-text">
            <h3>Title</h3>
            <p>Content....</p>
            <a href="#" class="button blue no-margin">SEE HOW IT WORKS</a>
        </div>

        <div class="col-md-6 col-xs-12 backgroundg">
        </div>


    </div>

</div>

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 margin-top: 100vh; but then I need to give the video element object-fit: cover; and it floods the whole document as the background.

Just to give you an idea of my css (sass) so far:

video {
  object-fit: cover; 
  width: 100vw;
  height: 100vh;
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.clients{
  margin-top: 100vh;
}

I have been looking at a couple of tutorials like https://slicejack.com/fullscreen-html5-video-background-css/ and http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video but I don't think in there example, they have content below the full screen video.

Thanks.

Answer 1

It is possible to add responsive video with the below code:

<div class="video_wrapper">
  <video width="640" height="360" controls="" autoplay="">

    <!-- MP4 must be first for iPad! -->

    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
      <!-- Safari / iOS, IE9 -->
    <source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm">
      <!-- Chrome10+, Ffx4+, Opera10.6+ -->
    <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg">
      <!-- Firefox3.6+ / Opera 10.5+ -->    

   </video>
</div>

.video_wrapper { 
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.video_wrapper video { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Answer 2

Ended up doing this:

HTML:

<div class="video-container">
    <video playsinline autoplay muted loop poster="" id="bgvid">
      <source src="/wp-content/themes/_quander/assets/QUANDER_PITCH_CUT_3.mp4" type="video/mp4">
    </video>

</div>

<div class="container-fluid home-page">

    <div class="row clients">

        <div class="client-slider col-12">

            <?php foreach($clients as $key => $client) : ?>
                <div class="client-logo" style="background-image: url(<?php echo $client->featured_image; ?>)"></div>   
            <?php endforeach; ?>

        </div>

    </div>              

    <div class="row">

        <div class="col-md-6 col-xs-12 info-text">
            <h3>Title</h3>
            <p>Content....</p>
            <a href="#" class="button blue no-margin">SEE HOW IT WORKS</a>
        </div>

        <div class="col-md-6 col-xs-12 backgroundg">
        </div>


    </div>

</div>

css:

.video-container{
    position: absolute;
    width: 100%;
    height: 100vh;
    overflow: hidden;

    video {
      object-fit: cover;
      width: 100vw;
      height: 100vh;
      position: absolute;
      top: 0;
      left: 0;
    }
}

.home-page{
    margin-top: 100vh;
}

So keeping the .home-page margin-top to 100vh stops the content riding up and overlapping the video.

The video is then dynamic (to the extent of being 100% vw and vh). Then having the overflow: hidden; on the .video-container stops the video flowing all over the page.

Answer 3

This should work for you. I have removed the padding from the container-fluid and used bootstrap class embed-responsive.

.home-page{
  padding: 0 !important;
  overflow: hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid home-page">
    

    <div class="embed-responsive embed-responsive-16by9">
      <video playsinline autoplay muted loop poster="polina.jpg">
          <source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761" type="video/mp4">
      </video>
    </div>

    <div class="row clients">

        <div class="client-slider col-12">

            <?php foreach($clients as $key => $client) : ?>
                <div class="client-logo" style="background-image: url(<?php echo $client->featured_image; ?>)"></div>   
            <?php endforeach; ?>

        </div>

    </div>              

    <div class="row">

        <div class="col-md-6 col-xs-12 info-text">
            <h3>Title</h3>
            <p>Content....</p>
            <a href="#" class="button blue no-margin">SEE HOW IT WORKS</a>
        </div>

        <div class="col-md-6 col-xs-12 backgroundg">
        </div>


    </div>

</div>