Heute nur ein kurzer Eintrag zum Thema „responsive Videos“ auf Webseiten. Das Schlagwort „responsive“ ist und bleibt in aller Munde – Alle möchten davon profitieren und ihre Seiten auf allen Medien „gutaussehend“ wissen. Was bei Grids, Bildern und sonstigen Elementen kein großes Problem ist, kann bei Videos ganz gerne mal etwas knifflig werden.

Oh, Fragmentierung…

Im Grunde handelt es sich bei Videos um nichts anderes als „normale“ HTML Elemente, die ebenso in der Größe verändert werden können wie auch Bilder. Wäre da doch nur nicht diese fiese Fragmentierung! Während es ‚zig responsive Grids und CSS Frameworks gibt (siehe Bootstrap, Pure, usw.) habe ich bisher nie bewusst gesehen das auch nur eines davon eine Unterstützung für eingebettete Videos mitbringt – Sei es nun Youtube, Vimeo oder über das <video> Tag.
Und ich schätze genau hier liegt der Knackpunkt – Es gibt zu viele „Möglichkeiten“ ein Video darzustellen… iFrame, Flash, HTML5… Mal von Browser-Plugins und Browsern selbst ganz abgesehen.

Die Lösung

Zum Glück gibt es zu diesem Zweck einige Plugins für jQuery & Co. wie z.B. fitVids. Es wird auf „die üblichen“ Methoden geprüft, wie ein Video eingebunden sein könnte und entsprechend darauf reagiert. Dabei ist es relativ egal, welche Größe (in Pixel oder Prozent) unser Video tatsächlich hat, es wird brav den Dimensionen des parent-Elements angeglichen.
Das bedeutet für uns: Skript herunterladen und einbinden… Das wars! Nun, zumindest im Idealfall 😉

Natürlich bringen diese Skripte wiederum nur Unterstützung für „einige“ Dienste (HTML5, Youtube, …) doch hier können sich findige Entwickler einfach ein Plugin raussuchen, das die benötigten Formate entsprechend beherrscht!

Und schon muss ich mich für diese Woche leider verabschieden, ich habe ein paar neue Projekte an denen ich aktuell arbeite 🙂 Ich wünsche euch da draußen eine sonnige Woche und natürlich Happy Coding!