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

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/