title: Bootstrap video jumbotron
body: <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>