HTML-Hintergrundvideo an Bildschirmgröße anpassen, die reagiert

Question

Ich habe ein Problem mit meinem HTML-Hintergrundvideo. Ich habe einige Artikel zu Stack Overflow gefunden und zu meinem HTML und CSS hinzugefügt. Aber es scheint nicht zu funktionieren, es wird entweder nicht reaktionsfähig oder es verwirrt mit meinen anderen divs und Elementen.

Ich habe ein Bild: (der Behälter des Videoelement hat gelbe Hintergrundfarbe)

Und hier ist der Code:

.container { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    box-shadow: 0px 10px 24px 0px rgba(50, 50, 75, 0.49); 
    font-size: 0; 
    background-color: yellow; 
    margin: auto; 
    z-index: -1000; 
} 

.container video { 
    min-width: 100%; 
    min-height: 100%; 

    width: auto; 

    position: absolute; 

    height: auto; 
    max-height: 100%; 
    width: 100%; 
} 

Wie Sie sehen können, die Videobreite tut nicht an die Bildschirmgröße anpassen. Ich habe versucht object-fit, aber dies wird es nicht reagieren.

Answer 1

Der Trick besteht darin, Ihren Container height: 0 dann das Seitenverhältnis des Videos als padding-bottom auf den Container anwenden. Sie erhalten das Seitenverhältnis des Videos, indem Sie die Höhe durch die Breite teilen und mit 100 multiplizieren, um einen Prozentwert zu erhalten. Positionieren Sie Ihr Video anschließend so, dass es den gesamten Speicherplatz im Container einnimmt.

Das Video in meinem Beispiel ist 320x176. (176/320) * 100 = 55%.

* {margin:0;} 
 
.container { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 0; 
 
    overflow: hidden; 
 
    box-shadow: 0px 10px 24px 0px rgba(50, 50, 75, 0.49); 
 
    font-size: 0; 
 
    background-color: yellow; 
 
    margin: auto; 
 
    z-index: -1000; 
 
    padding-bottom: 55%; 
 
} 
 

 
.container video { 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="container"> 
 
    <video src="https://www.w3schools.com/html/mov_bbb.mp4" loop autoplay></video> 
 
</div>

Answer 2

Wenn Sie das Video wollen immer 100% Breite und 100% Höhe des Containers zu füllen, egal das Verhältnis ist, dann sollten Sie mit overflow:hidden gehen und mit der Position oben spielen , rechts, unten, links Attribute, wenn Sie es zentrieren möchten. Diese

.container .video{ 
    min-width:100%; 
    min-height:100%; 
    overflow:hidden; 
} 

Answer 3

hat den Trick für mich, was ich für den Desktop gewünscht mindestens:

.container{ 
    width: auto; 
    height: 100%; 
    position: absolute; 

    bottom: 0px; 
    top: 0px; 
    background-color: yellow; 
    z-index: -1000; 
    overflow: hidden; 
    box-shadow: 0px 10px 24px 0px rgba(50, 50, 75, 0.49); 

    margin: auto; 

    font-size: 0; 
} 


.container video{ 

    min-width: 100%; 
    min-height: 100%; 
    position: static; 
    top: 0; 
    left:0; 
    height: 100%; 
    width: 100%; 
    object-fit: fill; 

    } 

für mobile Ich kann es eine andere Regel geben, denn jetzt das Video Änderungen Seitenverhältnis (was ich gewünscht) .