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:
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.
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.
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
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.
