Bootstrap video jumbotron
<p>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.</p>

<p>I've tried the solution posted <a href="https://stackoverflow.com/questions/10797632/simulate-background-sizecover-on-video-or-img">here</a> 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?</p>

<p>This shows what is going on:
<a href="https://jsfiddle.net/kae4q601/2/" rel="nofollow noreferrer">https://jsfiddle.net/kae4q601/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;

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