Responsives Video
YouTube und Vimeo gewinnen schon aufgrund des einfachen Einsetzens in den Editoren der Content Management Systeme: Sie bereiten das iframe-Element für uns auf. Die Editoren von WordPress, Drupal oder Joomla bringen Shortcodes oder ein Icon oder einen Extra-Block für die Videos der großen Medien-Provider.
CSS für das video-Tag
Das eigene Video mit einem video-Tag ist auf den ersten Blick eine einfache Sache: nur ein video-Tag mit einem src-Attribut für den Pfad zur Videodatei.
Dabei muss nicht einmal ein width- und height-Attribut angegeben werden, denn die Browser entdecken Breite und Höhe automatisch.
<video preload="none" style="width:96%" src="app.mp4" controls poster="app.webp"></video>
Egal wie breit oder hoch der Platz für das Video ist: Das Seitenverhältnis (aspect ratio) bleibt erhalten.
Am Rande: Ein Video ohne Ton, für dass keine Steuerelemente wie Play-Button und Stop gebraucht werden, kann ebensogut in einem img-Tag abgespielt werden.
<picture>
<source srcset="web-app.mp4" type="video/mp4">
<img src="web-app.mp4" alt="Progressive Web App geladen">
</picture>
Vimeo / YouTube-Video in iframe
Hier läuft alles anders. iframe-Elemente haben kein festes Seitenverhältnis, denn sie betten externe Dokumente ein. Wir können zwar ein iframe-Element auf 100% Breite ausdehnen und zusammenziehen, aber auch mit height: auto endet das Video im iframe bei einer Höhe von 150px (wenn width und height nicht angegeben sind, zeigen die meisten Browser iframe-, canvas-, embed- und object-Elemente mit 300px × 150px an).
Für ein responsives Video galt über 10 Jahre ein Rezept: Man packe es in ein relativ positioniertes Element mit demselben Seitenverhältnis, positioniere es absolut.
Wenn padding in Prozentwerten notiert ist, berechnet sich das padding nicht aus der Breite bzw. Höhe des Elements (also des iframe-Elements), sondern aus der Breite des umfassenden Elements (videowrapper). Das iframe-Element füllt das umfassende Element vollständig.
padding-bottom: 56.25% sorgte dafür, dass Breite und Höhe des Wrapper-Elements das Seitenverhältnis des Videos im iframe annahm.
.videowrapper {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Das funktionierte fast immer reibungslos, aber eben nur fast.
- Die padding-Technik brauchte ein zusätzliches HTML-Element rund um das iframe-Element.
- Das CSS passte nur, wenn das Seitenverhältnis des Videos 16:9 war.
Liegen Videos mit unterschiedlichen Seitenverhältnissen vor, müssten wir alle Seiten abgrasen und das padding für die Video-Container anpassen. Heute ersetzt CSS aspect-ration diesen wenig intuitiven Anlauf.
aspect-ratio – Seitenverhältnis
Der padding-Hack hat Video in iframe-Elementen viele Jahre an kleine und große Monitore angepasst. Jetzt ist CSS aspect-ratio in den modernen Browsern angekommen und regelt das Seitenverhältnis einfach und direkt.
Aspect Ratio – das Seitenverhältnis eines Elements – beschreibt das Verhältnis der Breite zur Höhe. Zwei prominente Seitenverhältnisse von Videos sind 4:3 (das Videoformat des letzten Jahrhunderts) und 16:9 (HD-Fernsehen als auch YouTube-Videos).
@supports (aspect-ratio: 16/9) {
.ratiobox {
aspect-ratio: 16/9;
}
}
CSS @supports macht nur Sinn, wenn tatsächlich noch alte Browser wie Internet Explorer unterstützt werden und Alternativen geboten werden sollen.
