Ändern Sie die Abmessungen eines Fullscreen-HTML5-Videos

Question

Gibt es eine Möglichkeit zu ändern, wie die Vollbildfunktion eines Videos in einem Browser verhält? Ich möchte das Video auf der linken Seite meines Bildschirms und ein Bild (eigentlich ein PDF) auf der rechten Seite anzeigen.

ich es mit CSS in Chrom versucht:

video:-webkit-full-screen 

Und das gab mir einige Ergebnisse, aber nicht die gewünschten. Soll ich dafür eine benutzerdefinierte Aktion erstellen? Und wenn ja, wie kann ich das Video aus den Grenzen der Browser ausbrechen lassen?

Answer 1

sollten Sie fügen den <video>-Tag in einem <div> mit einem definierten height und width mit den folgenden Attributen:

.video-container { 
    position: relative; 
    height: auto; 
    width: 60%; 
} 

video { 
    width: 100%; 
    max-width: 500px; // Or whatever value on your choice 
    height: auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

Mit einem width von 100% würde das Video des gesamten Browser Raum füllen, sondern begrenzt, wie groß es kann durch Einstellen einer max-width oder max-height für die Auflösung und das Ansprechverhalten sein. Ich hoffe, dass meine Antwort Ihnen hilft!

EDIT

in einem div richtig passen, Sie position: relative und position: absolute auf das Video selbst an den Behälter zuordnen müssen. Wenn Sie aus den Grenzen ausbrechen möchten, müssen Sie die Abmessungen von max-height und max-width des Videos optimieren.

Überprüfen Sie diese question, da es ähnlich wie Ihres ist.