Redaktion Dr. Web 15. Mai 2017

So integrierst du Videos responsiv in deine Website

Responsive Webdesign hat sich zum Standard entwickelt. Von modernen Apps und Websites erwartet man heutzutage geradezu, 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.

Wix Webseiten — echt superpraktisch. ↬ Mehr erfahren

Websites werden auf einer ganzen Reihe von Geräten verwendet. Die Liste eben jener ist geradezu endlos. Deine Besucher verwenden Smartphones, Laptops, iPads, Notebooks und andere Devices, um die Videos auf deiner Plattform zu sehen. Seien wir ehrlich, du hast keinen Einfluss darauf, wie Besucher deine Seite und deine Inhalte betrachten. Sicher, du könntest schon Einfluss ausüben. Du könntest deine Besucher auf bestimmte Geräte, Browser oder auf die Nutzung im Porträt- oder Landscape-Modus limitieren. Aber, tue das und du wirst mit Sicherheit Teile deines Publikums verlieren.

Vielleicht bist du mit dem Konzept der responsiven Bilder und der Notwendigkeit künstlerischer Leitung vertraut. Diese Konzepte verwenden wir als Entwickler, um Bilder auf eine Art responsiv skalieren zu lassen, die Verzerrungen möglichst vermeidet und die Auslieferung spezifischer INhalte über die Gerätegrenzen hinweg ermöglicht. Wenn dir das hingegen neu ist, dann beginne damit, indem du den Artikel von Eric Portis über responsive Bilder in der Praxis liest.

Wenn du umfangreiches Wissen um die Verwendung responsiven Bildmaterials hast, dann besitzt du bereits das volle Arsenal an Werkzeugen, um deine Websites so zu bauen, dass sie den Erwartungen deiner Besucher voll entsprechen. Aber, was ist mit Videos?

Sind deine Videos in gleichem Maße responsiv? Lass dich nicht von den Gewohnheiten deiner Nutzer überrumpeln. Sei der Samuel L. Jackson in jeder Situation, besonders mit Blick auf die Responsivität deiner Videos. Lass uns mal reinschauen!

Hast du schon einmal Videos von YouTube oder Vimeo in deine Seiten integriert? Ich gehe mal davon aus, dass jeder, hmm, na ja, wohl eher fast jeder schon getan hat. Sicherlich gehst du davon aus, dass so eingebettete Videos 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:

<!DOCTYPE html>
Responsives Video
<iframe src="https://www.youtube.com/embed/y5-hH8DnqMk" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Das erschütternde Ergebnis: Nicht responsiv!

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

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.

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 Lösung hier: https://codepen.io/team/Cloudinary/pen/aWNpjE

Schauen wir uns noch eine CSS-basierte Lösung an.

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.

Wenden wir auch dieses Script mal auf unser Fallbeispiel an.

Auf Codepen findest du die Lösung hier: https://codepen.io/team/Cloudinary/pen/Wjwpwo

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.

Auf Codepen findest du die Lösung hier: https://codepen.io/team/Cloudinary/pen/gWrmLp

Pures CSS

Nehmen wir an, dass wir CSS-Frameworks verabscheuen. Wie machen wir unser Video nun mit purem CSS responsiv? Wir wollen keinerlei programmlogische Magie einsetzen.

Bedanken wir uns überschwänglich 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.

Auf Codepen findest du die Lösung hier: https://codepen.io/team/Cloudinary/pen/XRdMRY

Eine ganz ähnliche Implementation findest du in diesem Beitrag auf nosecreeks Blog.

Fallstudie zur Einbettung von HTML5-Videos

Wie du weißt, steht dir neben der Verwendung von Embed-Codes auf der Basis von iFrames auch das bekannte HTML5-Element video zur Verfügung. Wie machst du nun solche Videos responsiv?

Glücklicherweise gestaltet sich die Lösung in diesem falle sehr einfach. Du setzt einfach die maximale Breite des Elements per max-width auf 100 Prozent und die Höhe auf auto. Wenn dir das bekannt vorkommt, hast du Recht. Denn es handelt sich exakt um die gleiche Methode, wie jene für responsive Bilder.

Auf Codepen findest du die Lösung hier: https://codepen.io/team/Cloudinary/pen/qmZrXv

Schauen wir auch noch auf Cloudinary

Auch mit Cloudinary kannst du Videos auf deiner Website so bereitstellen, dass sie sich an das Design geschmeidig anpassen. Egal, ob du die Videos selber eingebaut hast oder sie von deinen Nutzern hochgeladen werden, sie landen stets in der Cloud.

Nun erstellst du beliebig viele resposnive, beschnittene oder in anderer Weise manipulierte Videos im Echtzeitbetrieb. Dafür verwendest du dynamische URLs oder verwendest Code, um entweder Video-Tags oder Video-URLs zu erstellen.

Cloudinary erlaubt dir, die Größe deines Videos zu ändern, indem du einfach Parameter für Breite und Höhe, repräsentiert als w für Breite und h für Höhe, in deinen URLs verwendest.

Wenn du die Breite und Höhe programmlogisch aus dem jeweiligen Viewport ermitteln lässt, kannst du deine Videos automatisch skalieren lassen, selbst wenn deine Nutzer mit verschiedenen Auflösungen spielen sollten.

Willst du etwa ein Video auf ein bestimmte Breite und Höhe festsetzen, erledigst du das so:

Oder du änderst nur die Höhe und behältst das Seitenverhältnis bei:

c_fit

Es ist ebenso möglich, ein Video unter Beibehaltung des ursprünglichen Seitenverhältnisses in eine bestimmte Breite und Höhe einzupassen. Im folgenden Beispiel wird ein Video in eine Höhe und Breite von 150 Pixeln eingepasst, während mittels c_fit das originale Seitenverhältnis gewahrt wird.

Fazit

In diesem Beitrag haben wir dir verschiedene Lösungen voirgestellt, 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.

Willst du mehr wissen, oder dir einen Account erstellen, um die genannten Features zu testen, besuche Cloudinary.

(Disclaimer: Dieser Beitrag ist ein Sponsored Post von Cloudinary.)

Redaktion Dr. Web

Unter der Bezeichnung "Redaktion Dr. Web" findest du Beiträge, die von mehreren Autorinnen und Autoren kollaborativ erstellt wurden. Auch Beiträge von Gastautoren sind hier zu finden. Beachte dann bitte die zusätzlichen Informationen zum Autor oder zur Autorin im Beitrag selbst.