Html5 Video Responsive Abschnitt

Question

Ich habe ein Video, das ich zu meinem Hauptabschnitt meiner Website hinzugefügt habe, sind die Abmessungen 1920 x 1080, mein Problem ist, dass die Seiten nicht 100% Breite sind, wenn ich die Höhe 100vh machen.

wenn ich die Höhe: 100% es geht über die vh des Browsers und die Reaktionszeit ist zu klein.

die Art, wie sie dieses Video hier haben, ist, was ich

http://www.welcometofillory.com/

.container video { 
    height: 100% !important; 
    width: 100% !important; 
    overflow: hidden; 
    } 

<div class="container"> 
<video id="my-video" preload="auto" loop style="width: 1920px; height: 1080px;" width="100%" height="100%"> 
<source src="landing-video.mp4" type="video/mp4"></source> 
</video> 
</div> 

Answer 1

Was passiert mit Ihnen zu tun versuche, ist korrekt, da das Video immer proportional vergrößert wird. Wenn Sie es addieren, um 100vh zu sein (die gesamte browswer Höhe), dann werden die Seiten von der Leinwand gehen, da die Beziehung 16: 9 ist.

Ich empfehle Sie, Bootstraps auf ansprechendes Video zu verwenden:

<div class="embed-responsive embed-responsive-16by9"> 
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe> 
</div> 

Oder einfach ein Wrapper, um es hinzuzufügen, dass das Video nicht über Grenzen zu gehen erlaubt.

.container { 
    width:100%; 
    height: 100vh; 
    overflow: hidden; 
} 
video{ 
    height: 100vh; 
    width: auto; 
} 

Lassen Sie mich wissen, ob dies Ihnen geholfen, sonst bitte weitere technische Daten zu Ihrer Frage hinzufügen, es besser zu verstehen.