Plein écran HTML5 Vidéo

Question

J'ai regardé partout et n'ai pas encore trouvé une excellente solution. J'essaie de mettre en place un plein écran, une vidéo réactive. Voici la structure spécifique du site.

tête fixe

Masthead - A la vidéo plein écran

principales - 5 sous-sections, tout plein écran

Pied de page

donc, le Masthead est un div qui contient du texte et la vidéo elle-même conçue pour occuper 100% de la largeur et de la hauteur de l'écran. Cette div doit être sensible et mettre à l'échelle avec la page.

Actuellement, j'ai une solution qui remplit la page, mais qui s'étend au-delà de la hauteur de la page lorsqu'elle devient trop large, ce qui n'est pas idéal. Quelqu'un at-il une solution pour cela? J'ai regardé les liens "vidéo d'arrière-plan en plein écran", mais ceux-ci le traitent réellement comme un fond de page et fixent la vidéo à la fenêtre, ce qui n'est pas ce qui doit se passer ici.

Voici mon code.

HTML

<div id="masthead"> 
    <div class="masthead-intro"> 
     <h1>We are a Community for Good</h1> 
     <h3>Curabitur dignissim elemen tum ante pellentesque rhoncus.<br> 
     Viva muse rutrum felis id risus tris tique, ut congue orci.</h3> 
    </div> 

    <video src="/video/PCL_BornDreamersShortForm.mp4" poster="img/masthead-video.png" autoplay loop muted></video> 
</div> 

et CSS

#masthead { 
margin-top: $baseline*3; 
position: relative; 
margin-bottom: $mobile-baseline*3; 
max-height: 100vh; 
@include respond-to-min($break-medium) { 
    margin-bottom: $baseline*3; 
    margin-top: 0; 
} 

video {  
    position: absolute; 
    top: 0; 
    left: 0; 
    min-height: 100%; 
    width: 100%; 
    height: auto; 
    z-index: -100; 
    overflow: hidden; 
} 
} 

Je ne suis pas opposé à une jquery ou d'une solution javascript si quelqu'un a un.

Answer 1

Il semble que la vidéo se développe au-delà de la hauteur de la page puisque vous définissez la hauteur sur auto et cela remplace le précédent height:100%. Que diriez-vous de le faire dans l'autre sens?

video {  
    position: fixed; 
    top: 0; 
    left: 0; 
    min-height: 100%; 
    width: auto; 
    z-index: -100; 
    overflow: hidden; 
} 

Bien sûr, cela aurait le problème dans les écrans où la largeur est supérieure à la hauteur, il y aura une zone non couverte par la vidéo. Peut-être pouvez-vous éditer deux versions de la vidéo, une pour les affichages verticaux et une pour les horizontales et charger la version appropriée avec une requête @media en css ou avec jquery.