title: Airbnb Video Header
body: <p>Airbnb has recently launched its new design which includes a video header. I could not figure out how they achieve that the video header is always the same ratio of the browser window, while the video stays full width and centered.</p>
  
  <p>So, I want a 50% height video header that has a vertically and horizontally centered video in it, no matter how big my browser window is.</p>
  
  <pre><code>HTML
  
  &lt;video loop="loop" preload="auto" id="pretzel-video" class="video-playing"&gt;
  &lt;source src="//a0.muscache.com/airbnb/static/Paris-P1-1.mp4" type="video/mp4"&gt;
  &lt;source src="//a0.muscache.com/airbnb/static/Paris-P1-0.webm" type="video/webm"&gt;
  &lt;/video&gt;
  
  CSS
  
  #pretzel-video {
  bottom: 0;
  position: absolute;
  width: 100%;
  }
  
  video {
  display: inline-block;
  }
  </code></pre>
  
  <p>I found this bit of code, but this keeps being fullscreen no matter what I am doing.</p>
  
  <p>Can anyone provide further help please. </p>