html - Bootstrap and absolute positioned video tag -

i have been having mess around web development lately , have been using bootstrap lot. 1 thing have been trying replicate how airbnb has video playing on website , content continues underneath it. i've been trying replicate in bootstrap, can't keep , feel of how video plays, , have bootstrap play nice it.

html:

<div class="container">     <div class="hero">         <video loop="loop"preload="auto" autoplay="true">             <source type="video/mp4" src="https://a0.muscache.com/airbnb/static/croatia-p1-0.mp4"></source>             <source type="video/webm" src="https://a0.muscache.com/airbnb/static/croatia-p1-0.webm"></source>         </video>     </div> </div> <div class="container">     <div class="row">         <div class="col-lg-12">             <h1>this test</h1>         </div>     </div> </div> 

css:

.hero { z-index: -1; position: absolute; right: 0; left: 0; top: 0; height: 600px; overflow: hidden ; min-width: 1045px; } 

here jsfiddle have been playing around in:

http://jsfiddle.net/z2ps0q5n/

any advice appreciated. can tell stems absolute position of video on page. understanding, provides awesome , feel airbnb gets.

with bit of css think good, mobile more difficult.

.hero {   z-index: -1;   position: fixed;   top: 50%;   left: 50%;   min-width: 100%;   min-height: 100%;   transform: translatex(-50%) translatey(-50%);   max-width: 100%; }  .container {     width: 100%;     overflow: hidden; }