Kommentare 29

CSS-Tipp: Eingebettete Videos für responsive Webdesigns optimieren

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:

.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%;
}

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:

<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>

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.:

<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>

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

.elastic-video-wrapper {
	width: 500px;
	max-width: 100%;
}

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!

29 Kommentare

  1. Peter

    Was es nicht alles gibt…

    Mag ein Bug in meinem FF sein (6.0.2) oder einfach technisch bedingt, aber schiebe ich das Video auf 300px Breite zusammen oder weniger, bekommt auch die elastic-video Version oben einen zunehmend breiten schwarzen Balken bei mir. 300px sind andererseits auch schon verflixt schmal.

  2. Genau wie du habe ich auch schon Einiges ausprobiert und dann direkt verworfen, weil ich mit diesen Streifen einfach unzufrieden war.

    Mit dieser Lösung scheint das Problem mit den Videos verhältnismäßig leicht erledigt zu sein.

    Für Leute, die keinerlei Programmierkenntnisse haben, befürchte ich jedoch, dass es noch zu kompliziert sein könnte. Diese Leute möchten im Idealfall genau die Youtubeadresse kopieren, einfügen und alles automatisch angepasst haben.

  3. Pingback: Responsive Webdesign Tutorial  MRwebcatch  Folge #10

  4. Edi

    Hier noch der Original-Artikel von A List Apart:
    http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

    Der Artikel beschreibt ganz verständlich die Funktionsweise des Tricks. Kurz zusammengefasst: Das Padding begrenzt einen Container auf ein bestimmtes Verhältnis. Der darin liegende Inhalt wird dann auf 100% Höhe und Breite gestretcht. Zu beachten ist, dass für evtl. Playersteuerung (meistens fixe Pixelanzahl) zusätzlich via padding-top Höhe reserviert werden sollte.

    In eurem Beispiel beträgt das Padding übrigens 55% und nicht 56.25% (= Verhältnis 16:9), was der Grund sein könnte, dass trotzdem schwarze Balken auftauchen, je weiter man das Video staucht.

    Zum testen solltet ihr Chrome verwenden. Der Firefox skaliert das Video nicht beliebig runter… (Bug?)

  5. Pingback: Netrobin » Nachdenken über Design

  6. Pingback: raaaf.de | rafael alex

  7. Die angebotene Lösung ist nicht nur super, sondern auch die Art, wie sie angeboten wird. Ich habe nur wenig Ahnung von HTML und CSS, und konnte dennoch sofort umsetzen, während andere Beiträge über das Einbetten von Videos mich entweder nur verwirren konnten, oder als kaum brauchbar erschienen waren.

    Tausend Dank!

  8. Dagmar

    Vielen Dank für diesen tollen Artikel! Nur: bei mir sehe alle drei deiner Videobeispiele gleich aus. Auch wenn ich das Browserfenster verkleinere verhalten sich alle drei gleich – Firefox 12.0 für Mac und auf einem Netbook auch. Hmm – wie kann das denn sein? Hat Vimeo inzwischen wieder was geändert?

    • Christian Scholz-Flöter

      Ich kann ebenfalls keine Unterschiede zwischen den drei Videos feststellen mit einer Ausnahme: Mal ist das eine, mal das andere Video erst einmal gar nicht zu sehen. Nach einem Reload der Seite wird es dann angezeigt (aber dafür fehlen dann eventuell andere Videos).

      Windows 7 / Firefox 17.0.1

  9. Hallo Ellen,
    Danke für die Anleitung. Weißt du zufällig, wie so etwas auch für eingebettete Slideshows, also Power-Point-Folien von slideshow.com funktioniert? Denn die überlappen leider und verhagelnt mir in waipoua das geasamte Design.
    Danke

  10. Julia

    Hallo Ellen,
    super Info nur leider gibt es da mit Youtube Videos neuerdings Probleme. Der Browser lässt sich nicht mehr verkleinern oder vergrößern wenn ein Video im Artikel ist.
    Gibt es dafür einen Grund warum das nicht mehr geht?
    Liebe Grüße
    Julia

  11. Pingback: Webdesign 2012 – Trends und Entwicklungen | MTM – Creative Solutions

  12. Tom

    Hallo….

    gib es auch eine möglichkeit videos die als mp4 per eingebettetem videoplayer in wordpress 3.8 in den content eingebunden werden darüber zu skalieren?

    ich habe es mit dem oben gezeigten css versucht, allerdings gibt es dann kein vorschaubild und der mittige playerbutton verschwindet je kleiner das video wird..

    eine idee?

    danke und grüsse tom

Schreibe eine Antwort