CSS für HTML-Video / Video in iframe

CSS für Video

18-12-15 SITEMAP

Responsives Video

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

YouTube und Vimeo gewinnen schon alleine aufgrund des einfachen Einsetzens in den Editoren der Content Management Systeme: Sie bereiten das iframe-Elemente für uns auf, der Editor des CMS hat einen Shortcode oder ein Icon oder einen Extra-Block für die Videos vom Video-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. Allerdings reicht es schon, das width-Attribut mit 100% anzusetzen, dann ist das Video automatisch responsive und passt sich an die Breite des HTML-Containers an.

<video src="web-app.mp4" width="100%" controls></video>

Egal wie breit oder hoch der Platz für das Video ist: Das Seitenverhältnis (aspect ratio) bleibt erhalten.

Vimeo / YouTube-Video in iframe

Hier läuft alles anders. 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 gibt es seit über 10 Jahren 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% sorgt dafür, dass Breite und Höhe des Wrapper-Elements das Seitenverhältnis des Videos im iframe annimmt.

.videowrapper {
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
}

.videowrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Das funktioniert fast immer reibungslos, aber eben nur fast.

  • Die padding-Technik braucht ein zusätzliches HTML-Element rund um das iframe-Element
  • Das CSS passt nur, wenn das Seitenverhältnis des Videos 16:9 ist.

Liegen Videos mit unterschiedlichen Seitenverhältnissen vor, müssten wir alle Seiten abgrasen und das padding für die Video-Container anpassen.