Responsive Embed Videos (Youtube, Vimeo etc.)

Eine Webseite heutzutage nicht mehr responsive zu bauen ist fatal, denn Google bestraft diese Seiten mittlerweile mit einem schlechteren Ranking. Es wächst eine Generation heran, die am Liebsten alles mit dem Smartphone erledigen möchte – wirklich alles. Ich würde behaupten, dass es sogar schon vorausgesetzt wird, dass man alles von überall machen kann.

Bei der Entwicklung von Webseiten, die sich an verschiedene Größen anpassen sollen, gibt es kleinere Probleme die gelöst werden müssen. In Zeiten von BibisBeautyPalace, Sami Slimani usw. – eben die Youtube-Generation – sind “Embed Videos” auf Webseiten ganz alltäglich geworden. Dabei wird ein iFrame geladen und um diese responsive darzustellen, bedarf es einen kleinen Kniffs – den zeige ich dir jetzt.

Markup

Du brauchst zu ersten einen Wrapper um den iFrame. Diesem geben wir die Klasse media-wrapper und darin können wir den Code des Videos einfügen. Er gibt dem Video das Format und die Größe vor.

CSS – Magic

Der Container hat immer ein 16:9 Format und das schaffen wir mit einem kleinen Trick.

Der Wert des Abstands nach unten ergibt sich daraus, dass wir das 16:9 Format haben ((9/16)*100 = 56.25%). Dazu geben wir dem Container eine relative Positionierung und dem iFrame eine absolute Positionierung sowie Hundertprozent Breite und Höhe. Der iFrame passt sich dadurch an den Maßen des umliegenden Containers an – eben responsive.

Zeit für die Demo

Wenn du auf dem Desktop unterwegs bist, solltest du das Browserfenster kleiner ziehen. Bei einem Mobilgerät wirst du schon sehen, dass es sich der Größe deines Screens angepasst hat.

1 Comment

  • Jannick says:

    Hi Tim,

    sehr praktisch und funktioniert super.

    Du hast nur einen kleinen Zahlendreher in deinem Artikel (16/9)*100 sind 177.777…
    Korrekt wäre (9/16)*100 = 56.25.

    Viele Grüße 🙂

Leave a Reply

Your email address will not be published.