So integrierst du responsive Videos und iframes in deine Website

Von modernen Apps und Websites erwartet man, dass sie sich an verschiedesten Auflösungen in möglichst idealer Weise anpassen. So ergibt sich ein optimales Benutzererlebnis, ganz egal, welches Gerät oder welche Auflösung genutzt wird. Inhalte, Bilder und Videos sollten sich in gleicher Weise fließend verhalten, um unterschiedliche Viewports bestmöglich zu bedienen.

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

Fallstudie zur Einbettung von Videos

Nimm irgendein YouTube-Video, meinetwegen dieses hier: https://www.youtube.com/watch?v=y5-hH8DnqMk.

Schnapp dir den Embed-Code und bau ihn in dein HTML 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: 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 du die Videos auf deiner Website responsiv gestalten kannst. 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, etwa so:

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

Beachte: Die Eigenschaft padding-bottom ist wichtig, damit die Technik auch tatsächlich unter Beachtung des Höhe-zu-Breite-Verhältnisses deines 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:

See the Pen Responsives-Video by Dr. Web (@drweb) on CodePen.light

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

Responsive Youtube Videos in WordPress

Wenn dein Theme keine responsiven Videos unterstützt, dann kannst du den Support dafür schnell selbst festlegen. Eine PHP-Funktion 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 findest du die FitVids-Lösung:

See the Pen Responsive Videos mit FitVids by Dr. Web (@drweb) on CodePen.light

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 Lösung im Codepen:

See the Pen FluidVids demo by Dr. Web (@drweb) on CodePen.light

ZURB Foundation

ZURB Foundation bietet eine CSS-LÖsung, die geradezu erstaunlich einfach zu verwenden ist. Mittels flex-video sorgst du dafür, dass dein Video auf jeder Plattform perfekt skaliert. Dafür benötigst du 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.

See the Pen Responsive Videos in ZURB by Dr. Web (@drweb) on CodePen.light

Fazit

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

Deine Besucher sollten deine 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.