Youtube-Videos Datensparend einbinden

Youtube-Videos Datenschutz-konform einzubinden ist gar nicht so schwer. Aber manchmal liegt der Teufel im Detail. Über die Cookie-sichere-Einbettung von Youtube wird zwar kein Cookie mehr gesetzt, Daten werden durch den Request an Youtube aber trotzdem übertragen. Gerade im Hinblick auf die kommenden neuen EU-Datenschutz-Gesetze sollte man sich auch als Blogautor fragen, wie man seine Leser besser schützen kann. In diesem Artikel erkläre ich Euch wie das geht.

Die Datenübertragung an Youtube lässt sich natürlich nicht völlig vermeiden. Dann müsste man gänzlich auf die Nutzung des Dienstes verzichten. Wer aber nun einmal Videos zeigen und nicht selbst hosten möchte, kommt um einen externen Dienstleister nicht herum. Aber man kann zumindest gewährleisten, dass nur Benutzer getrackt werden, die auch wirklich Interesse am Video haben. Ein eingebetteter Iframe wird aber nun einmal sofort geladen.

Die einfachste Lösung wäre natürlich einfach einen schlichten Link anzubieten. Vielleicht noch mit einem netten Vorschaubild versehen. Benutzer werden dann einfach an Youtube weiter geleitet und können dort das Video schauen. Das könnte dann im Markup so aussehen wie unten.

<div class="youtube-wrapper">
  <a href="https://youtu.be/e0bwaZiu0A8" class="youtube-link" target="_blank">
    <img src="/user/pages/demos/data-saving-youtube-embed/demo-compressed.jpg?resize=936" alt="This War of Mine" />
  </a>
</div>

Das Video ist dann allerdings nicht mehr wirklich Teil der Webseite. Eure Webseite dient dann lediglich als Weiterleitung zum Video. Also bleibt dann wirklich nur noch die Einbettung eines Iframes? Vielleicht zumindest in der Cookie-sicheren Variante? Das würde dann für das obige Video so aussehen.

<iframe width="976" 
        height="549" 
        src="https://www.youtube-nocookie.com/embed/e0bwaZiu0A8?autoplay=1" 
        frameborder="0"
        allowfullscreen></iframe>

Ich fand beide Lösungen irgendwie unbefriedigend. Also habe ich ein kleines Script geschrieben, um die beiden Varianten miteinander zu verbinden. Ich habe den Markup aus dem ersten Beispiel genommen und ein kleines Script geschrieben, welches über alle Youtube-Links looped und Event-Listener registriert. Diese fangen Clicks ab und ersetzen den Link mit dem entsprechenden verlinkten Youtube-Video. Das Script sieht dann so aus...

var links = document.getElementsByClassName('youtube-link');
for (let i = 0, len = links.length; i < len; i++) {
  links[i].addEventListener('click', function _onClick(event) {
    var target = event.target || event.currentTarget;
    while (!target.classList.contains('youtube-link')) {
      target = target.parentNode;
    }

    var parent = target.parentNode;
    var matches = target.href.match(/[^\/]*$/gi);
    if (matches.length > 0) {
      var id = matches[0];
      var rect = parent.getBoundingClientRect();
      var path = `https://www.youtube-nocookie.com/embed/${id}?autoplay=1`;

      parent.innerHTML = `
        <iframe width="${rect.width}" 
                height="${rect.height}" 
                src="${path}" 
                frameborder="0" 
                allowfullscreen></iframe>`;

      event.preventDefault();
    }
  });
}

Wir verbinden hier also das Gute aus beiden Welten. Zum einen werden Benutzer, die das Video nicht anclicken auch nicht getracked, zum anderen verwenden wir die Cookie-sichere Einbettung bei Clicks, so dass interessierte Besucher zumindest ein Mindestmaß an Datenschutz genießen können. In der folgenden Demo könnt Ihr das Ganze in Aktion sehen.