Responsive iframes und YouTube-Videos

Wie man zum Beispiel Bilder in ein responsives Design einbindet ist schnell erklärt, hier eine recht gängige Möglichkeit:

.inhalt img {width: 100%; max-width: 60rem; height: auto;}

Diese Vorgehensweise funktioniert leider nicht bei iframes und somit auch nicht bei YouTube-Videos. Die Breite ist nicht das Problem sondern die Höhe, da bei iframes die CSS-Deklaration height: auto; keine Wirkung zeigt. Hier muss man anders vorgehen.

Für diesen Beitrag habe ich auch ein Screencast erstellt, mit welchem man die Problematik sehr gut erkennen kann. Aber zurück zum Problem, die Lösung besteht darin, dass man den Einbettungscode des YouTube-Videos, also das iframe in ein extra div-Block platziert. Diesen div-Block positioniert man dann relativ und das iframe innerhalb wird dann absolut positioniert. Hier erst einmal das HTML:

<div class="video-block" title="Kampf gegen ein Nazgûl im Westen von Gondor. Aufgenommen in Herr der Ringe Online.">
  <iframe width="530" height="298" src="https://www.youtube.com/embed/KdI7EQsmlJs" frameborder="0" allowfullscreen></iframe>
</div>

… und nun der passende CSS-Code dazu:

.video-block {
  position: relative; 
  padding-bottom: 56.25%; /* 16:9 */
  height: 0; 
  overflow: hidden; 
  width: 100%; height: auto;}

.video-block iframe {
  position: absolute; 
  top: 0; left: 0; 
  width: 100%; height: 100%;}

Das Ganze gibt es auch als Gist auf Github und als ein CodePen.

Bei der Einbindung von YouTube in WordPress gibt es eine Besonderheit, die man der oEmbed-Funktion zu verdanken hat. Mann kann die Videos dann entweder so einbinden:

<div class="video-block">
  <iframe width="530" height="298" src="https://www.youtube.com/embed/KdI7EQsmlJs" frameborder="0" allowfullscreen></iframe>
</div>

… also den Einbettungs-Code von YouTube in den div-Block einfügen oder man nutzt innerhalb des div-Blocks die oEmbed-Funktionalität aus:

<div class="video-block">
  https://youtu.be/pfad-zum-video
</div>

… und fügt lediglich die URL des Videos innerhalb des div-Blocks ein.

Auf das Ganze hat mich der Artikel von Sven Wolfermann gebracht. Sein Artikel geht noch weiter und handelt auch iframes mit dynamischen Höhen ab.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

• WordPress: nicht-responsive Bildunterschriften reparieren
• Linkschleuder 22: WordPress, CSS3, Schriften
• WordPress: Verschachtelte & gemischte Listen erstellen, ohne Plugin
• World Backup Day
• Passwort-Cookie-Dauer in WordPress-Beiträgen anpassen