Lazy Loading YouTube (external content) - Vanilla JS

Lazy Loading YouTube (external content) - Vanilla JS

Hier möchte ich Euch nun eine Variante vorstellen um YouTube Videos auf Eurer Website einzubinden.
 Gerade wenn man mehrer YouTube-Videos auf einer Seite zur Verfügung stellen möchte erkennt man schnell wieviel Daten von YouTube nachgeladen werden und das ohne auch nur ein Video gestartet zu haben. Einige von Euch möchten auch gerne den Besucher der Website darauf aufmerksam machen, dass externer Inhalt abgespielt wird und dadurch die Abrufdaten an YouTube gehen.

In dieser Variante habe ich das YouTube-IFrame was in den meisten Implementierungen verwendet wird durch ein DIV ersetzt, dieses bekommt das YouTube Thumbnail-/Poster-Bild als Hintergrund-Bild, welches durch das JavaScript von YouTube geladen wird oder noch besser welches man zuvor lokal auf den Server ablegt und in dem Attribut data-poster des DIV übergibt.

Passende Formate sind leicht durch einmaligen Download zu erhalten, folgende Möglichkeiten stehen zur Verfügung:

		* Hohe Qualität: https://img.youtube.com/vi/[youtube-video-id]/hqdefault.jpg
		* Medium Qualität: https://img.youtube.com/vi/[youtube-video-id]/mqdefault.jpg
		* Standard Qualität: https://img.youtube.com/vi/[youtube-video-id]/sddefault.jpg
		* Maximale Auflösung: https://img.youtube.com/vi/[youtube-video-id]/maxresdefault.jpg
		* andere Formate wie webp existieren auch, werden vom IE-11 allerdings nicht unterstützt
 standard quality: https://i.ytimg.com/vi_webp/[youtube-video-id]/sddefault.webp

Im data-src Attribute muss die YouTube IFrame src komplett oder auch nur die YouTube Video-Id angegeben werden, über JavaScript wird sowieso nur die Id verwendet, egal ob für das Video als auch für das Thumbnail-/Poster-Bild.

Des weiteren wird ein zentrierter Play-Button erzeugt der wie der Play-Button im YouTube Player aussieht, zu dem kann durch das titel-Attribut der Video-Titel eingeblendet werden und mit dem Attribute data-external ein Hinweistext eingeblendet werden das externe Resourcen von YouTube nachgeladen werden.

Durch das Setzen des Attributes data-target="popup" ist es auch möglich das Video in einem simplen Popup anzuzeigen in der auf die Browser-Fenster Abmessungen angepassten Qualität. Dieses Popup startet das Video unmittelbar nach der Einblendung, nach Beendigung des Videos schließt sich das Popup automatisch.

Die YouTube Player API wird durch diese Implementierung erst beim Start eines Videos geladen, wie auch das Video, wird ein zweites mal ein Video gestartet wird die API nicht erneut geladen.

Natürlich werden die Videos von YouTube ohne Cookies eingebunden (https://www.youtube-nocookie.com) und durch setzen des Meta-Tags referrer mit dem Wert no-referrer wird die Weitergabe des Referrers unterbunden.

Bei allen versuchen die Daten der Website-Besucher zu schützen sorgen die YouTube Scripte natürlich dafür die Information in welcher Seite das Video eingebettet ist an YouTube weiter zu reichen (https://www.youtube-nocookie.com/embed/ScMzIvxBSi4?enablejsapi=1&origin=https://www.gocher.me&widgetid=1).

---------------------------------------------

HTML:

youtube.htm("http://www.gocher.me/code/youtube/youtube.htm")

JavaScript:

youtube.js("http://www.gocher.me/code/youtube/youtube.js")

Sind viele Videos auf der Seite kann auch lazy loading Sinn machen, kombiniert würde lazy loading und youtube in diesem Fall natürlich noch effektiver sein youtube_lazy.js("http://www.gocher.me/code/youtube/youtube_lazy.js").

StyleSheet:

youtube.css("http://www.gocher.me/code/youtube/youtube.css")