CSS für HTML-Video / Video in iframe

Video in Webseiten fällt im wahrsten Sinne des Wortes aus dem Rahmen. Auf der einen Seite kann ein Video in einem HTML-video-Element abgespielt werden, auf der anderen Seite sehen wir Video fast immer in einem iframe, meist von YouTube oder Vimeo.

CSS für Video in iframe-Elementen

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.

Video von YouTube / Vimeo in Gutenberg einsetzen
In den Editoren der Content Management Systeme muss sich der Autor nicht um das CSS für ein responsives Video kümmern.

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.

Progressive Web App geladen
<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).

YouTube-Video Bildschirmfoto self-extracting-gartenstuhl.mp4

Mit dem Abspielen dieses Videos akzeptieren Sie die Datenschutzbestimmungen von YouTube.

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.

Suchen auf mediaevent.de