Light YouTube Embed

Da ich eine Webseite mit dutzenden von Videos betreibe, suchte ich nach einer Lösung, um nicht alle paar Jahre den Videoplayer aktualisieren, die Videos neu codieren zu müssen. Auch das Einbetten von Videos in HTML 5, um kein Flash mehr zu benutzen, bedingt, dass die einzubettenden Videos in mehrere Formate (mp4, ogg, webm, etc…) codiert werden müssen.

YouTube oder auch Vimeo als Videoportal erleichtert die Verwaltung von Videos und bringt den Vorteil, dass man sich nicht gross um Codecs und Videoplayer kümmern muss – da Videos per iframe relativ einfach in Webseiten eingebettet werden können.

Aus diesem Grund hatte ich nun die ca. 30 Videos bei YouTube eingestellt und per iframe auf der Webseite eingebunden. Was ich unterschätzt hatte, war nun die Ladezeit, resp. die schiere Grösse der Webseite. Aus meiner Sicht für Benutzer eines Mobiles oder Benutzer mit geringer Bandbreite nicht zumutbar. Auf der Suche nach einer Lösung bin ich auf eine Technik gestossen, welche von Google+ beim Einbetten von YouTube Videos verwendet wird. Diese funktioniert so, dass nur das Thumbnail vom aktuellen Video eingebettet und der Videoplayer erst bei einem Klick auf das Thumbnail geladen wird.

Klickt der Webseitenbsucher den Abspiel-Button, wird das Thumbnail durch den Standard-YouTube-Player ersetzt und das Video startet automatisch, da der autoplay-Parameter auf 1 gesetzt ist. Dies bringt den Vorteil, dass das YouTube-JavaScript nur geladen, wenn das Video auch abgespielt wird.

Die folgende Anleitung um YouTube Videos ergonomisch einzubinden, geht auf den Artikel A Better Method for Embedding YouTube Videos on your Website von Amit Agarwal zurück. Wobei ich das Script so angepasst habe, dass jegliches Bild als Video-Vorschaubild verwendet werden kann. Ausserdem sollen auch Videos im Format 4:3 richtig dargestellt werden.

Der Standard YouTube embed Code sieht so aus:

Der neu zu verwendende Tag:

Wobei, das data-img-Attribut optional ist. Wird es weggelassen, wird das Standard-Thumbnail des YouTube Videos geladen.

Also, nun hier das JavaScript, welches alle Elemente der Klasse youtube-player durch das Video-Thumbnail ersetzt.

Für Videos im Format 4:3 einfach die Klasse vier-zu-drei hinzufügen, ansonsten erhält der Videoplayer das Format 16:9.

Hier also das CSS, um die YouTube Videos responsive zu machen.

 

Bitte letztlich beachten, dass Chrome- und Safari-Browser auf iPhone und Android nur die Wiedergabe von HTML5-Videos ermöglichen, wenn sie durch eine Benutzerinteraktion initiiert werden. Eingebettete Medien werden von der automatischen Wiedergabe blockiert, um unerwünschte Downloads über Mobilfunknetze zu verhindern.

Anschauungsbeispiele von ergonomisch eingebetteten YouTube Videos finden sich auf meiner Webseite.

Wichtiges Update

Leider musste ich feststellen, dass der Click Event bei den aktuellsten Mobile-Browsern nicht mehr ausgelöst wird. Das Problem scheint im Zusammenhang mit dem event listener zu bestehen:
Added non-passive event listener to a scroll-blocking ‚touchmove‘ event. Consider marking event handler as ‚passive‘ to make the page more responsive.

Daher habe ich das Script gleich in Verwendung von jQuery überarbeitet. Es muss neu nur jQuery eingebunden und der Javascript durch den jQuery-Teil ersetzt werden.