Schon seit einer Weile habe ich nach einer praktischen Lösung gesucht, um über iframe eingebettete YouTube- oder Vimeo-Videos für responsive Layouts zu optimieren. Die Video-Player lassen sich zwar auch standardmäßig mit Hilfe der CSS-Eigenschaft max-width:100%; skalieren, aber leider entsteht so immer ein unschöner schwarzer Balken, wenn man das Video auf einem kleinen Bildschirm oder auf einem Smartphone anschaut.

Daher war ich besonders froh über den Artikel “CSS: Elastic Videos”, den Nick La neulich bei Web Designer Wall zu diesem Problem veröffentlicht hat. Inzwischen habe ich die Lösung für elastische Videos selbst getestet und eine kleine Zusammenfassung hier vorbereitet.

Der benötigte CSS Code

Um ein eingebettetes Video in einem responsive Webdesign zu nutzen, musst du den iframe-Code in einem zusätzlichen Div-Container einschließen. Diesem Div-Container gibst zu z.B. die CSS-Klasse “elastic-video”.

Die CSS-Klasse sollte folgende CSS-Eigenschaften haben:

[php]
.elastic-video {
position: relative;
padding-bottom: 55%;
padding-top: 15px;
height: 0;
overflow: hidden;
}
.elastic-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
[/php]

Durch den padding-bottom Wert von 55% wird der eingebettete Video-Player jetzt gleichmäßig skaliert. Der Code für dein Video sieht dann z.B. so aus:

[php]
<div class="elastic-video"><iframe src="http://player.vimeo.com/video/27359051?byline=0&amp;portrait=0" width="610" height="343" frameborder="0"></iframe></div>
[/php]

Hier das eingebettete Video als Beispiel:

Indem du das Browser-Fenster kleiner skalierst, kannst du die optimierte Skalierung des Video-Players sehen.

Zum Vergleich hier auch noch einmal das eingebettete Video ohne den zusätzlichen Div-Container mit der Klasse .elastic-video:

Beim Verkleinern des Browser-Fensters wird hier der schwarze Balken oberhalb und unterhalb des Videos sichtbar.

Die Breite des Videos festlegen

Das Problem ist allerdings, dass dein eingebettetes Video jetzt immer auf die volle Breite seines Eltern-Divs skaliert wird (in diesem Fall also auf die komplette Artikel-Breite). Möchtest du dies nicht, benötigst du einen weiteren Div-Container, mit dem du den .elastic-video Div umschließt. Z.B.:

[php]
<div class="elastic-video-wrapper"><div class="elastic-video"><iframe src="http://player.vimeo.com/video/27359051?byline=0&amp;portrait=0" width="500" height="281" frameborder="0"></iframe></div></div>
[/php]

Über die CSS-Klasse elastic-video-wrapper kannst du jetzt über die CSS-Eigenschaft “width” eine feste Breite für dein Video bestimmen:

[php]
.elastic-video-wrapper {
width: 500px;
max-width: 100%;
}
[/php]

Das Video ist nun maximal 500 Pixel breit:

Das WordPress Plugin Raw HTML nutzen

Falls du Probleme bei der direkten Einbindung des Video-Embed Codes haben solltest (manchmal wird der iframe Code bei der Einbindung über den Texteditor von WordPress quasi verschluckt), kannst du das WordPress-Plugin “Raw HTML” testen. Mit Hilfe des Plugins sollte die Integration des Video-Codes über den WordPress HTML-Editor eigentlich kein Problem mehr sein.

Hast du Fragen oder weitere Optimierungs-Vorschläge zum Einbetten von Videos in einem responsive Webdesign? Über dein Feedback und deine Tipps freue ich mich sehr!