Wie enthält man ein Video?

Question

Schnelle Frage, da ich es hier nicht finden kann. Ich habe ein Video und ich habe es mit dem folgenden Code angebracht auf html

video { 
 
    top: 50%; 
 
    left: 50%; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
}

<section class="banner"> 
 
    <div class="banner-header"> 
 
    <video poster="#" autoplay="true" loop> 
 
     <source src="coding.mp4" type="video/mp4" /> 
 
    </video> 
 
    </div> 
 
</section>

Wenn ich es ausprobieren, mein Video zeigt, es spielt und Loops. Perfekt. Außer der Größe ist so massiv, dass ich nach rechts scrollen kann und ich den Körper nicht mehr nur den Hintergrund und die ganz rechte Seite des Videos sehe.

Ich möchte, dass das Video kleiner wird und korrekt mit der gesamten responsiven Website ausgerichtet wird. Und unter dem Video ist ziemlich genau der Körper der Website, die meine Fähigkeiten und Kontaktdaten sind. Das Video dient also als "Header", obwohl ich einen richtigen Header mit Navigationsschaltflächen habe und was nicht.

Answer 1

In Ihrem CSS, entfernen

min-width: 100%; 
min-height: 100%; 
width: auto; 
height: auto; 

dann für width einen numerischen Wert angeben, zum Beispiel 50% oder 400px.

Der Browser wird das Video proportional skalieren, so dass Sie die Höhe nicht einstellen müssen.

Answer 2

Gelöst.

Auf meinem CSS hatte ich den folgenden Code

.banner { 
    width: 150%; 
    background-color: #6991AC; 
} 

es zu 100% von 150% geändert, mit dem CSS-Code für Video von der Frage ich es nur geändert enthalten Breite und Höhe, mit einer Breite Set zu 100% und Höhe zu Auto.