Responsive iFrames und Videos einbinden (Anleitung)

Doch haben Sie schon einmal Videos von YouTube oder Vimeo in eine Seiten integriert, oder eine Google Map? Sicherlich geht man davon aus, dass so eingebettete Videos und Maps quasi von selber responsiv sind. Aber stimmt diese Annahme auch?

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

Was ist ein Iframe und wann verwenden Sie es?

Entwickler verwenden das iframe-Tag, um ein externes HTML-Dokument einzubetten, wie beispielsweise ein Facebook-Like-Button, ein YouTube-Video oder ein Werbebanner.

Im folgenden Code wird ein 500-Pixel-Quadrat von der Google-Startseite angezeigt:

Hier ist ein weiteres Beispiel, in dem wir eine Schaltfläche zum Twittern anzeigen:

iFrame-Attribute, die Sie kennen sollten

Es gibt sechs sehr praktische Attribute, mit denen wir das Verhalten und den Stil eines iFrames anpassen können.

Definiert die Adresse der Website, von welcher Inhalte angezeigt werden sollen

Externen Inhalte ohne externes CSS und JavaScript laden

Die Höhe und Breite des iFrames festlegen

height=“200px“ und width=“500px“ definiert eine fixe Höhe (200px) und Breite (500px) für das Iframe.

Dem iFrame einen Namen zuordnen

Um dem iFrame eine bestimmte JavaScript-Funktion zuzuordnen, geben wir dem iFrame einen Namen:

Dem iFrame erlauben, den ganzen Bildschirm einzunehmen

Dieses Attribut ist standardmäßig enthalten, wenn man einen Youtube-Embed-Code kopiert:

Die Höhe eines iFrames automatisch an die jeweilige Höhe des Inhalts anpassen

Wenn man nicht bei jedem iFrame genau die Höhe definiert, kann es sein, dass es oben und unten schwarze Balken bekommt. Das können wir dem folgenden JavaScript-Snippet verhindern:

Und indem wir dem iFrame folgenden Wert hinzufügen:

Den iFrame-Rahmen entfernen

Jedes iFrame-Element ist von Haus aus von einem Rahmen umgeben. Um diesen zu entfernen, setzen Sie mit dem style-Attribut den Rahmen auf border: none;

Ein responsives Youtube-Video einbetten

Jetzt nehmen wir ein YouTube-Video, z.B. das hier: https://www.youtube.com/watch?v=y5-hH8DnqMk.

Und bauen den Embed-Code ein:

Das erschütternde Ergebnis: Das Video ist nicht responsiv!

Wie machen wir dieses eingebettete Video nun also responsiv? In unserem Beispiel hier verwenden wir YouTube. Genauso gut hätten wir aber auch jede andere Plattform nehmen können, etwa Vimeo, oder einen Kartenausschnitt von Google Maps.

Responsive Lösungen

Glücklicherweise gibt es eine ganze Reihe von Lösungen, mit denen man die Videos auf einer Website responsiv gestalten kann. Schauen wir mal auf die verfügbaren Tricks mit CSS und JavaScript.

Lesetipp: Videos schneiden: mit diesen 7 (kostenlosen) Software Tools geht das 🎥

Pures CSS

Nehmen wir an, dass wir CSS-Frameworks verabscheuen. Wie machen wir unser Video nun mit purem CSS responsiv?

Bedanken wir uns bei Thierry Koblentz für seine Technik des Skalierens von Videos. Er löst das Problem nämlich so, dass jede Veränderung der Videobreite eine Neuberechnung der Videohöhe auflöst, die sogenannte „Intrinsic-Ratio“-Methode. So können Videos sich frei in der Größe verändern, ganz ähnlich, wie das auch Bilder tun.

Viele der CSS-Frameworks und Plugins verwenden diese Methode unter der Haube.

Zunächst müssen wir das eingebette Video in ein div verpacken und ihm eine Klasse zuweisen:

Nachdem wir nun das iFrame in einen Div-Container verpackt haben, müssen wir den Kind-Elementen des video-wrapper (iframe, object und embed) jeweils eine Weite und eine Höhe von 100 Prozent mitgeben, damit sie sich voll an den Wrapper anpassen:

Jetzt gestalten wir die video-wrapper-Klasse wie folgt:

Bitte beachten: Die Eigenschaft padding-bottom ist wichtig, damit die Technik auch tatsächlich unter Beachtung des Höhe-zu-Breite-Verhältnisses eines Videos funktioniert. 56,25 Prozent steht für 16:9, 74,25 Prozent für 4:3 und 50 Prozent entspricht 16:10.

In Codepen sieht das Ganze so aus:

Und mit einer Google Map sieht das Resultat dann so aus:

Responsive Youtube Videos in WordPress

Wenn ein Theme keine responsiven Videos unterstützt, dann kannt man den Support dafür schnell selbst festlegen. Eine PHP-Funktion (einzubauen in die functions.php) sorgt für eine automatische Einbettung in ein Div, die CSS-Angaben sorgen für die optimale Skalierung bei jeder Auflösung.

Das nötige CSS:

FitVids.js

Dieses leichtgewichtige, einfach zu verwendende jQuery-Plugin wurde von Chris Coyier und Paravel entwickelt. Das Plugin automatisiert die Erstellung von responsiven Videos nach der „Intrinsic-Ratio“-Methode von Thierry Koblentz. Es legt um jedes Video einen div.fluid-width-video-wrapper und wendet das erforderliche CSS an. Nach dem ersten JavaScript-Call übernimmt das CSS und erledigt die erforderlichen Schritte zur Responsivität. Lass uns mal schauen, wie das mit unserem Fallbeispiel aussähe.

Auf Codepen findet man die FitVids-Lösung.

Fluidvids.js

Fluidvids.js stammt aus der Feder von Todd Motto. Es nimmt den iFrame-Tag als Ziel und wendet die gleiche Methode, wie das eben genannte Plugin an, um die Berechnung des Seitenverhältnisses durchzuführen. Der Vorteil dieses Scripts ist der, dass es nicht auf Drittanbieter angewiesen ist, also keinerlei Dependenzen mitbringt.

Mit minimalem Script-Aufwand erledigt es das Rendering schneller und bietet insgesamt eine bessere Performance.

Hier die FluidVids-Lösung auf Codepen.

ZURB Foundation

ZURB Foundation bietet eine CSS-LÖsung, die geradezu erstaunlich einfach zu verwenden ist. Mittels flex-video sorgt man dafür, dass ein Video auf jeder Plattform perfekt skaliert. Dafür benötigt man allerdings das Foundation-Framework.

Verwenden wir auch diese Lösung, um unser Fallbeispiel responsiv zu gestalten.

Und so sieht die Lösung für ZURB aus: Link zur Demo auf CodePen.io

Fazit

In diesem Beitrag haben wir verschiedene Lösungen vorgestellt, mit deren Hilfe man responsive Videos für eine Website erstellen kann — abhängig vom jeweiligen Anwendungsfall und der Art des Projekts.

Die Besucher sollten Inhalte uneingeschränkt, von jedem Gerät aus in gleicher Weise konsumieren können, gerne auch mal offline. Dabei geht es nicht nur um das schiere Funktionieren. Vielmehr müssen Videos auch ansehnlich gerendert werden und entsprechend fantastisch aussehen. Responsives Video passt wunderbar auf diese Zielsetzung.