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

Answer 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.

Answer 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/