Bootstrap video jumbotron

Question

I'm trying to get a video to cover a bootstrap Jumbotron with no success. This seems like a very simple thing to do, but everything I try seems to fail.

I've tried the solution posted here with no success. I've also tried just setting the position of the video to absolute, and setting all sides to 0, but that doesn't seem to work either. What am I doing wrong?

This shows what is going on: https://jsfiddle.net/kae4q601/

.jumbotron{
  position: relative;
  
  /* Tried setting the height. Didnt work either */
  /* height: 200px; */
}

#video-background { 
  position: absolute;
  bottom: 50%; 
  right: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto;
  z-index: -1000; 
  overflow: hidden;
}

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="jumbotron">
  <video id="video-background" preload muted autoplay loop>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  </video>
  <div class="container">
    Hello World
  </div>
</div>

Solution 1

Looks like you've got a lot of unnecessary css going on. To start I would definitely define the jumbotron z-index in order to keep the gray padding in the background.

.jumbotron{
  position: relative;
  z-index:-101;
}

Next some cleaner simpler code for the video background like so:

    #video-background { 
      position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        z-index: -100;
        width:100%;
}

Here's the fiddle https://jsfiddle.net/kae4q601/5/ Let me know if this is what you were trying to achieve.

Solution 2

Since .jumbotron has a grey background, setting the the video background to z-index: -1000; will make the video display behind the grey background, thus invisible. Also, when making video backgrounds cover, the parent needs to have overflow:hidden, not the video itself.

CSS:

.jumbotron{
   position: relative;
   overflow: hidden;
   height: 200px;
}

.container {
  position: relative;
  color: #ffffff;
  z-index: 2; /* Show content above video */
}

#video-background{ 
  position: absolute;
  height: auto;
  width: auto;
  min-height: 100%;
  min-width: 100%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  z-index: 1;
}

Here is a working fiddle: https://jsfiddle.net/kae4q601/15/

Comments

[Austneal]

Yes, that seems to work perfectly! I'm guessing the key was to set the z-index of the jumbotron?

[Josh Sanger]

I would suggest against using position fixed to achieve this. The video will follow the page if the there is content below the video wrapper. Instead I would use position absolute and have the parent overflow hidden. This will allow you to set the height of the wrapper (.jumbotron) to what ever you want and the video will act like a background cover. Fiddle: jsfiddle.net/kae4q601/15

[Austneal]

@JoshSanger Agreed. I had to change it to position: absolute