Wie man einen Video Container mit benutzerdefinierter Höhe erstellt und Inhalte auf dem Container anzeigt

Question

Ich möchte einen benutzerdefinierten Videohintergrund für einen bestimmten div Container erstellen und Inhalte wie Überschriften, Absätze darüber anzeigen ... Wann Ich behalte die Höhe bei 100%, das Video funktioniert gut mit voller Breite .. Aber wenn ich versuche, die Größe zu ändern, verringert sich auch die Breite.

Wie mache ich die Videoanzeige in einer Höhe von 500px zum Beispiel und halten Sie die Breite auf voller Breite ... und einen kleinen Absatz mit einer Überschrift in der Mitte des Videos anzuzeigen.

video#videobg { 
 
    position: relative; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: 100%; 
 
    height: 500px; 
 
    
 
}

<div class="container"> 
 

 
    <video autoplay poster="Cheer-Up.jpg" id="videobg" loop> 
 
    <div><p>Something here</p></div> 
 
    <source src="Cheer-Up.webm" type="video/webm"> 
 
     <source src="Cheer-Up.mp4" type="video/mp4"> 
 
     Your browser does not support the video tag. I suggest you upgrade your browser. 
 
    </video> 
 
</div>

Answer 1

versucht CSS mit einer bestimmten Höhe für die Video-Container zu setzen, sondern auch die Einstellung der Breite Sie es bleiben wollen. ziehe das in deine Kopfzeile.

<style> 
    #videobg { 
     height: <PUT YOUR HEIGHT HERE>; 
     width: <PUT YOUR WIDTH HERE>; 
    } 
</style> 

auch, setzen Sie die Breite auf eine bestimmte Anzahl von Pixeln. Die 100% können sich je nach Höhe ändern.