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
Vous devez vous connecter pour publier un commentaire.
C'est le CSS du div parent (
#hero
) qui la gère. À l'aide de positionnement absolu et le réglage de la du haut, de gauche, de droite et de propriétés à zéro étire pour s'adapter à la fenêtre d'affichage.OriginalL'auteur j08691
suffit d'utiliser le plugin jquery fitvids avoir un réactif vidéo. Son un moyen extrêmement simple d'obtenir ce que vous voulez:
http://fitvidsjs.com/
OriginalL'auteur hugorut