HTML5-Problem in voller Breite - CSS, HTML5, Video, Breite

Ich suche nach einer Möglichkeit, ein HTML5-Video mit voller Breite (aber nicht voller Höhe) zu erstellen.

So etwas würde mir das CSS für CSS für das Hintergrundbild ermöglichen.

Beispiel:

http://photohack.rs.af.cm

Die Bildleiste unterhalb der Kopfzeile würde durch einen Videohintergrund in voller Breite ersetzt.

Breite 100% und Einstellung der Höhe funktionieren nicht, da das Video automatisch skaliert wird und nicht die volle Breite.

Vielen Dank!

Antworten:

In den meisten Fällen ist es eine einfache Lösung.

video {
max-width: 640px /* cannot exceed this width */
max-height: 390px /* cannot exceed this height */
width: 100% /* 640px or less depending on size of viewport */
height: auto /* automatically calculates height from via above values */
}

Immer! Verwenden Sie immer Prozente, wenn Sie mit Videos in voller Breite, Responsive Design und Mobile arbeiten. Die Verwendung von Pixeln ist nur dann in Ordnung, wenn Sie das Pixel definieren max-height und max-widthEigenschaften.