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:

Achtung! Externe Datenquelle!

Das hier eingebettete Video wird durch den Anbieter "YouTube LLC", 901 Cherry Avenue, San Bruno, CA 94066, USA, vertreten durch Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA bereitgestellt.

Wenn Sie im Folgenden auf "Video laden" klicken, wird Ihre IP-Adresse an YouTube übermittelt und YouTube erfährt, dass Sie das Video angesehen haben. Sind Sie bei YouTube eingeloggt, wird diese Information auch Ihrem Benutzerkonto zugeordnet.

Von der dann möglichen Erhebung und Verwendung Ihrer Daten durch YouTube habe ich keine Kenntnis und darauf auch keinen Einfluss.

Nähere Informationen können Sie der Datenschutzerklärung von YouTube unter www.google.de/intl/de/policies/privacy/ entnehmen.

Video laden

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.

Wenn dieser Beitrag im Job oder Alltag geholfen hat, dann freue ich mich sehr über ein Dankeschön. Entweder per E-Mail, in Form eines Euros für die Aufstockung der koffeinhaltigen Getränke oder auch über ein Geschenk von meiner Amazon Wunschliste. Weitersagen, dass es hier hilfreiche Inhalte gibt, ist natürlich auch immer prima. Viel Spaß weiterhin!