YouTube datenschutzkonform einbinden
Wer YouTube-Videos datenschutzkonform in seine Webseite integrieren will, der wird schon festgestellt haben, dass das nicht allzu leicht erledigt ist. Selbst bei der „datensparsamen“ Einbettung werden sofort beim Laden der Seite noch Verbindungen zu YouTube-Servern aufgebaut, ohne das der Endnutzer dies beeinflussen kann. Streng genommen ist das ein Verstoß gegen die DSGVO, wenngleich mir noch nicht bekannt ist, dass dafür bereits jemand verklagt wurde.
Um hier auf der sicheren Seite zu sein bietet sich, wie auch bei Social Media Share Links üblich, eine Zwei-Klick-Lösung an. Dabei wird zunächst kein externer Inhalt geladen, ggf. ein Hinweis zur Einbettung von externen Quellen angezeigt, und erst durch die Zustimmung des Nutzers wird das Video schließlich geladen.
Schön wäre darüber hinaus, wenn man das Ganze optisch ansprechend gestalten könnte. Das bedeutet, dass nicht nur ein schlichter grauer Kasten und ein Hinweis zu sehen sein sollte, sondern vielleicht schon das Vorschaubild des Videos. Aber auch hier lauert wieder eine Falle. Das Vorschaubild stammt natürlich auch von externen Servern die durch YouTube betrieben werden und auch da könnten also datenschutzrechtliche Probleme auftauchen.
Mit dem Umstieg auf Hugo hat mich dieses Thema natürlich auch beschäftigt. Ich habe dazu eine Lösung geschrieben, die den Standard-Shortcode von Hugo für YouTube-Integrationen überschreibt. Damit musste ich nicht alle Beiträge nochmal überprüfen, die aus WordPress exportierten Beiträge enthalten bereits den korrekten Shortcode.
Schauen wir uns zunächst das Ergebnis an:
Hier wird zunächst keinerlei Verbindung zu YouTube aufgebaut, ein Hinweis informiert über die Nutzung einer externen Datenquelle. Im Hintergrund ist allerdings bereits das Vorschaubild zu sehen. Ein Klick auf „Video laden“ setzt dann das Video im datensparsamen Modus ein und die weitere Bedienung ist wie von entsprechenden Einbettungen gewohnt.
Die Schritte dafür in Kürze:
-
Es wird ein responsive-fähiger Container für das YouTube-iFrame erzeugt. Damit wird eine gute Darstellung über alle Bildschirmgrößen hinweg sichergestellt.
-
Das Container-iFrame wird mit dem Hinweis sowie einem Button gefüllt, um den Nutzer über mögliche Datenschutzrisiken zu informieren.
-
Als Hintergrund des Containers wird das Thumbnail des Videos eingesetzt. Dieses wird durch ein PHP-Script lokal zwischengespeichert, um keine Rückschlüsse durch YouTube auf den Nutzer zuzulassen.
-
Es wird eine JavaScript-Funktion erstellt, die den Hinweis nach einem Buttonklick durch das YouTube-iFrame (im datensparsamen Modus) im gewählten Container ersetzt. Erst jetzt erfährt YouTube, dass ein, möglicherweise identifizierbarer, Nutzer das Video anschauen will.
Das Ganze in Form des Hugo-Shortcodes findet sich hier auf Gitlab. Wenngleich das jetzt nicht 1-zu-1 für andere Systeme übernommen werden kann, so ist das Konzept natürlich adaptierbar. Im Rahmen eines Generators für statische Seiten bietet es sich allerdings an, Scripte und CSS inline zu erstellen. Damit spart man sich die Einbindung des benötigten JavaScript und CSS auf Seiten, die überhaupt kein Video eingebettet haben.
CSS und JavaScript lassen sich aber zum Beispiel in WordPress schön in ein Plugin oder auch ein Theme einfügen, über die Shortcode API könnte dann die Video-ID übergeben und ein entsprechender datenschutzkonformer Container für das Video generiert werden.
Über mich
Ich bin gelernter Mediengestalter, studierter Druck- und Medientechniker und leidenschaftlicher Tüftler und Bastler.
Beruflich beschäftige ich mich mit der digitalen Transformation von Unternehmen, sowie der Automatisierung von Unternehmensprozessen, in der Druck- und Medienbranche. Mehr dazu findet sich im Lebenslauf.
Privat interessieren mich Kaffee(maschinen), Themen rund um Webentwicklung, das Internet im Allgemeinen und Speziellen und vieles, vieles mehr.
Ich freue mich auf Feedback per E-Mail unter kontakt@flomei.de, einen Euro für die Kaffeekasse oder etwas von meiner Amazon Wunschliste.