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?

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:

<iframe src="https://www.google.com/" height="500px" width="500px"></iframe>

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

<iframe src="https://platform.twitter.com/widgets/tweet_button.html" style="border: 0; width:130px; height:20px;"></iframe>

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

<iframe

src="https://google.com/"

</iframe>

Externen Inhalte ohne externes CSS und JavaScript laden

<iframe

srcdoc="<p>Der Inhalt, den Sie hier sehen, wird niemals vom CSS der externen Webseite beeinflusst.</p>"

</iframe>

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.

<iframe

height="200px" width="500px"

</iframe>

Dem iFrame einen Namen zuordnen

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

<iframe

name="mein-iframe"

</iframe>

Dem iFrame erlauben, den ganzen Bildschirm einzunehmen

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

<iframe

allow="fullscreen"

</iframe>

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:

<script> function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';    } </script>

Und indem wir dem iFrame folgenden Wert hinzufügen:

<iframe src="..." frameborder="0" scrolling="auto" onload="resizeIframe(this);" />

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;

<iframe src="https://www.drweb.de/" style="border: none;"></iframe>

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:

<iframe width="560" height="315" src="https://www.youtube.com/embed/MFQPaN3Slws" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

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.

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:

<div class="video-wrapper">
   <iframe src="https://www.youtube.com/embed/y5-hH8DnqMk" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

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:

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

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

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

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.

<?php
/**
 * Responsive Videos, Youtube and Vimeo
 *
 */
function evolution_wrap_oembed( $html ){
    $html = preg_replace( '/(width|height)="\d*"\s/', "", $html ); // Strip width and height #1
    return'<div class="embed-responsive embed-responsive-16by9">'.$html.'</div>'; // Wrap in div element and return #3 and #4
}
add_filter( 'embed_oembed_html','evolution_wrap_oembed',10,1);

Das nötige CSS:

.embed-responsive.embed-responsive-16by9 {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.embed-responsive.embed-responsive-16by9 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* Diese Angabe macht HTML5 Videos responsive */
video {
    width: 100% !important;
    height: auto !important;
}

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. 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.