Airbnb Video Header

Question

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.

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.

HTML

<video loop="loop" preload="auto" id="pretzel-video" class="video-playing">
<source src="//a0.muscache.com/airbnb/static/Paris-P1-1.mp4" type="video/mp4">
<source src="//a0.muscache.com/airbnb/static/Paris-P1-0.webm" type="video/webm">
</video>

CSS

#pretzel-video {
bottom: 0;
position: absolute;
width: 100%;
}

video {
display: inline-block;
}

I found this bit of code, but this keeps being fullscreen no matter what I am doing.

Can anyone provide further help please.

Answer 1

It's the CSS on the parent div (#hero) that handles it. Using absolute positioning and setting the top, left, and right properties to zero stretches it to fit the viewport.

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

Answer 2

Here is the code to generate airbnb like video in a certain viewport height with responsive, central align video. Replace source of the video and it should work.

html, body{
	height: 100%;
}


/* header height sets static height needed for the video to be rendered in browser view port
 * for height in percent to work parent container needs to have percent value in this case body was given 100% height
*/
header{
	height: 90%;
	position: relative;
	background-color: red;
}

/* hero_area div containing video needs to be the size of parent div height, thus top, left, right, bottom helps to stretch hero_area div to the size of parent by giving position absolute.
 * overflow hides the video over-flowing outside the current size of hero_area. this can be helpful to control the visible part of video by pulling it using position value in video (top / bottom/ left/ right).
*/

.hero_area{
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	position: absolute;
	overflow: hidden;
}

audio, canvas, video{
	display: inline-block;
}

/* here bottom value can be set to 0 to always match the buttom part of the video with the buttom part of the containing div, in our case hero_area. I have used negative -150px to pull the video downward so that i can chop some unwanted area which overflow of parent(hero_area) will hide.
* as width is set to 100%, and height to auto, as the width of the browser changes height is auto calculated making the video responsive
*/

.hero_area video{
	bottom: -150px;
	position: absolute;
	width: 100%;
	height: auto;
}

<header id="container">
    <div class="hero_area">
    <video id="sensi-video" loop="loop" preload="auto" class="video-playing" autoplay="autoplay">
      <source type="video/webm" src="videos/sensi-vid.webm"></source>
      <source type="video/mp4" src="videos/sensi-vid.mp4"></source>
    </video>
  </div>
</header>

Answer 3

just use the jquery plugin fitvids to have a responsive video. Its an incredibly easy way to achieve what you want:

http://fitvidsjs.com/