YouTube-Videos responsive einbetten ohne JavaScript

Immer häufiger müssen YouTube-Videos in eine Website eingebunden werden, deren breite variabel ist. Mit wenigen zeilen CSS ist das kein Problem.

Eine kleine Lösung, die ich in letzter Zeit häufiger benötige und die mir immer gute Dienste geleistet hat, um YouTube-Videos in ein responsive Design einzubetten. Es sind nur ein paar Zeilen CSS und es ist kein JavaScript erforderlich.

Die Lösung an sich ist relativ simpel. Sie erfordert nur einen zusätzlichen Container – zum beispiel einen <div>, der die Größe vorgibt, der kann zum Beispiel automatisch vom CMS geliefert werden. Der darin liegende <iframe> wird wird dann einfach an die Größe des umliegenden Containers angepasst.

Da wir aber nicht wissen wie hoch der Container sein muss, generieren wir einfach mit einem Padding von 56,25% einen Rahmen, der immer automatisch im Seitenverhältnis 16:9 dargestellt wird. Wenn wir jetzt den darin liegenden <iframe> auf dessen Höhe und Breite zerren, funktioniert das Wunderbar.

HTML


CSS


.youtube {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

Oben seht ihr das fertige Ergebnis in Form eines YouTube-Videos, dass genau diesen Vorgang erklärt.

Portraitfoto Andreas Dantz

Andreas Dantz

Andreas ist Designer und Berater für Digitales und ist spezialisiert auf Designsysteme & Apps.

Weiterlesen

Sie benötigen Hilfe mit dem Design Ihrer (Web-)App?

Dann zögern Sie nicht und lassen Sie uns herausfinden, ob eine Zusammenarbeit für Beide Seiten ein Gewinn ist.