≡ Menü

Tipps & Tricks – Youtube Videos in responsive Sites einbetten

YouTube Logo

Dieser Mini-Artikel ist eigentlich nur ein Reminder, oder ein Lesezeichen für mich selbst. Mein Problem war, dass in Artikel eingebettete Youtube-Videos auf kleinen (Smartphone-)Displays nicht richtig in der Größe angepasst wurden. Dadurch blieb immer ein ziemlich breiter, weißer rechter Rand und damit für den eigentlichen Content weniger Platz.Die Lösung fand ich eigentlich recht schnell mit ein wenig Webrecherche. John Surdakowski, Webdesigner und Developer, beschreibt auf seiner Seite „Avex Design“ im Artikel „Responsive Youtube Embed“, wie ein klein wenig CSS und ein DIV-Container um das Video für die automatische Größenanpassung sorgen.

Und nur, damit ich nicht immer danach suchen muss, wiederhole ich das ganz hier kurz.

CSS

Folgende CSS-Styles muss man definieren:

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden; }

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

HTML

Anschließend kann man das Youtube Video mit folgendem Code in den Artikel einbinden:

<div class="video-container">
  <iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
</div>

Fazit

Auf den ersten Blick skaliert ein eingebettetes Video jetzt auch auf kleinen Displays sauber. Falls es auf dem ein oder anderen Device Probleme geben sollte, gebt mir doch kurz Bescheid. Ob ich das dann nachvollziehen und ändern kann, steht allerdings auf einem anderen Blatt 😉

{ 5 comments… add one }
  • Steven 14. Juni 2015, 13:52

    Danke dir für den Tipp aber du hast ein klein Fehler drin.. die CSS greift natürlich erst wenn Sie den Div Container erkennt.

    Du hast dein Div kein namen gegeben “ “

    Lg
    Steven

    • Geiststreicher 14. Juni 2015, 15:07

      Hi Steven,
      du hast natürlich völlig recht. Habe ich im Artikel jetzt korrigiert. Erstaunlich, dass der Fehler erst jetzt jemandem auffällt o_O
      Gruß, Sascha

  • Sascha 22. Oktober 2015, 17:58

    Eine responsive Integration von YouTube-Videos via iFrame sollte auch so funktionieren:
    [youtube http://www.youtube.com/watch?v=dFVxGRekRSg%5D

    • Geiststreicher 22. Oktober 2015, 21:13

      Das ist doch viel zu einfach 😉 Aber okay… Dann teste ich das mal. Danke! 🙂

  • Michel 4. Juli 2016, 09:14

    Hi Leutz,
    gibt es da nicht vielleicht ein Plugin um das im Wordpress einzubinden ?

Trackbacks

Leave a Comment

*