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 mehrere YouTube-Videos auf einer Seite zur Verfügung stellen möchte, erkennt man schnell wie viel 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 title-Attribut der Video-Titel eingeblendet werden und mit dem Attribut 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 weiterzureichen (https://www.youtube-nocookie.com/embed/ScMzIvxBSi4?enablejsapi=1&origin=https://www.gocher.me&widgetid=1).
HTML:
 youtube.htm 
JavaScript:
 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 .
StyleSheet:
 youtube.css