Airbnb Vidéo-Tête

Airbnb a récemment lancé son nouveau design qui comprend une vidéo de l'en-tête. Je ne pouvais pas comprendre comment ils réalisent que la vidéo de l'en-tête est toujours le même ratio de la fenêtre du navigateur, alors que la vidéo reste pleine largeur et centré.

Donc, je veux 50% de la hauteur de la vidéo en-tête qui a une verticale et à l'horizontale centrée sur la vidéo en elle, peu importe comment grand ma fenêtre de navigateur.

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;
}

J'ai trouvé ce bout de code, mais cela continue à être en plein écran peu importe ce que je fais.

Quelqu'un peut-il fournir une aide supplémentaire, veuillez.

OriginalL'auteur Spooz | 2014-07-27