MST-NETSOLUTIONS SEO BLOG

Youtube-Videos datenschutzkonform mit Einwilligung einbinden

von | Okt 5, 2023 | DSGVO, Google-Dienste, Youtube | 0 Kommentare

Auf einen Blick

Videos von Youtube einbinden

Das Einbinden von Youtube-Videos ist weit verbreitet und einfach zu machen. Einfach das passende Video suchen, auf Teilen klicken und den Einbettungscode kopieren:
youtube video einbetten

Diejenigen, die durch die DSGVO schon sensibilisiert sind, binden hier dann die Cookieless-Variante ein, bei der laut Youtube keine Benutzerdaten auf Deiner Seite gespeichert werden, solange das Video noch nicht angeschaut wurde.

Youtube videos datenschutzkonform einbinden

 

Was macht Youtube-Videos NICHT datenschutzkonform?

Generell sollte jedem mittlerweile klar sein, dass es die DSGVO aus dem Jahre 2018 gibt. Diese bringt auch hier Änderungen mit sich, bzw. Vorschriften, die zum Teil übersehen werden.

Wenn Du Youtube einbindest, werden in der „datenschutzkonformen“ Variante keine Cookies gesetzt. Es wird aber auch immer ein externer Server angesteuert, der Dir die Daten/das Video liefert. Somit bekommt dieser Server, der irgendwo auf der Welt steht, die IP-Adresse deines Besuchers und die ist immer personenbezogen. Also ist das Einbinden der Videos  nicht datenschutzkonform.

Du musst Dir also die Einwilligung holen, dass ein Video angezeigt werden darf. Und es reicht aus unserer Sicht nicht, wenn die nur durch Klick auf das Video eingeholt wird.

Was habe ich für Alternativen?

Es gibt natürlich auch immer die Möglichkeit eigene Videos auch selbst einzubinden. Das macht aber bei einer hohen Besucherzahl keinen Sinn und verursacht auch extrem viel Traffic.

Wenn ich Videos für unsere Kunden einsetze, dann nutze ich eine selbst geschriebene Einbindung. Die holt dann vom Besucher die passende Erlaubnis.

 

Wie kann jetzt eine Lösung aussehen?

Wenn Du das selbst einbinden möchtest, gebe ich dir hier den HTML-Code mit CSS-Style und Javascript. Das kannst Du alles bspw. in deine WordPressseite als reines HTML oder als Code bei DIVI einbinden.

<div id="mst_vid" class="mst_youtube" style="background-repeat: no-repeat; background-size: cover; height: 400px;" data-value="SCR-Link aus youtube teilen-Code">
  <div class="mst_vid-wrap">
    <div class="mst_vid-button-wrap">
     <div class="mst_vid-button">

      <div>Bitte klicken, um das Video von Youtube zu laden. Dabei werden personenbezogene Daten wie Ihre IP-Adresse an Google in den USA übertragen. Mit dem Klicken stimmen Sie dieser Übertragung zu.</div>
    </div>
  </div>
</div>

<style>
.mst_youtube { position: relative; width: 100%; height: 0; padding-bottom: 100%; }
.mst_youtube > * { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 0%;}
.mst_youtube { background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; background-image: url(mst_vid.jpg); }

@media screen and (min-width:481px) {
    .mst_youtube {  padding-bottom: 66.6666%; }
    .mst_youtube {  background-image: url(mst_vid.jpg); }
}

@media screen and (min-width:769px) {
    .mst_youtube { padding-bottom: 56.25%; }
    .mst_youtube { background-image: url(mst_vid.jpg);  }
}

@media screen and (min-width:1280px) {
    .mst_youtube {   }
    .mst_youtube {  background-image: url(mst_vid.jpg); }
}

.mst_youtube { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.3); }
.mst_youtube .mst_vid-button { position: relative; top: 260px; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); cursor: pointer; width: 80%; max-width: 20em; color: rgb(20%,20%,20%); background-color: rgba(255,255,255,0.9); padding: 0.5em; border-radius: 0px; box-shadow: 5px 5px 20px; }
.mst_youtube .mst_vid-button div:first-child { text-align: center; font-weight: 700; text-transform: uppercase; }
.mst_youtube .mst_vid-button div:last-child { font-size: 80%; line-height: 1.3;}
#mst_vid iframe{height:400px;}
</style>

<script>
(function (d) {

  var container = d.querySelector("#mst_vid"),
  wrap = d.querySelector("#mst_vid .mst_vid-wrap"),
  btn = d.querySelector("#mst_vid .mst_vid-button"),
  iframe = d.createElement("iframe"),        
  Standort = container.getAttribute('data-value');

  btn.addEventListener("click", function () {
    // set iframe mst_map_opt_in
    iframe.setAttribute("style", "border:0;");
    iframe.setAttribute("src", Standort);
    iframe.setAttribute("frameborder", "0");
  
    // remove all in container
    container.removeChild(wrap);

    // add iframe to container
    container.appendChild(iframe);
  }, false);

})(document);
</script>

Wenn Du den Code einbaust, musst Du noch eine Zeile ändern, um Deine Daten einzubinden.

In der ersten Zeile trägst Du den src-Link ein, den Du Dir von Youtube durch den Code zum Einbetten holst.

youtube mit Einwilligung

Du brauchst davon nur den Teil aus dem src=“„. Den trägst Du dann unter data-value=““ ein.

Was hier passiert, ist das zunächst ein Dummy-Vorschaubild geladen wird. Das Bild muss mst_video.jpg heißen und im gleichen Ordner liegen. Besser ist es, hier den absoluten Pfad zu nutzen und entsprechend im <style> unten auszutauschen, also statt mst_video.jpg sowas wie: https://www.mst-netsolutions.de/wp-content/uploads/mst_video.jpg

youtube code

Hier wird der Nutzer informiert, dass Daten übermittelt werden und es wird sichergestellt, dass eine Übertragung nur mit Einwilligung erfolgt, wenn er den Hinweis anklickt. Anschließend erst wird das iframe mit dem passenden Link des Videos versorgt und die Datenübertragung startet.

 

Youtube mit Einwilligung auf einen Blick:

  • Videos einbinden per Einbetten-Code von Youtube
  • Cookieless-Variante möglich
  • Externer Server heißt personenbezogene Daten
  • datenschutzkonform Einbinden nicht direkt möglich

! HINWEIS !

Wir geben hier keinerlei Rechtsberatung und die Tipps und Hinweise resultieren aus einer gewissenhaften recherche und erhaltener Beratung. Wir übernehmen keinerlei Haftung für irgendwelche Ansprüche.

Weitere Infos in unserem Blog

Unser Blog zur Suchmaschinenoptimierung bietet viele weitere interessante Infos zum Thema. Übrigens ist so ein Blog ein mächtiges Werkzeug für die Suchmaschinenoptimierung. Vor allem, um wichtige Suchworte und longtails zu pushen.

WordPress SEO ohne Plugin
Nov 25, 2023

WordPress SEO ohne Plugin

Wordpress bietet von Haus aus nicht die perfekte Unterstützung in Bezug auf SEO. Schon das Einbinden von individuellen Meta-Titlen führt zu Problemen. Dazu ist dann meist ein Plugin notwendig. Die bekanntesten sind...
weiter lesen
Michael Stötzel

Michael Stötzel

SEO-Berater und SEO-Experte

SEO-Tool: Ihre Webseite selbst optimieren | Website-Beratung und Software-Entwicklung


facebookinstagramlinkedinlinkedin


+49 1590 167 9617
mail@mst-netsolutions.de
Häufige Fragen und Antworten
Ist Yotutube datenschutzkonform?
Ist Yotube nocookies datenschutzkonform?
Gibt es eine einfache Methode Youtube nach DSGVO einzubinden?