Dsgvo - youtube

Quelle: https://easyrechtssicher.de/youtube-videos-dsgvo-konform-einbinden/ (2018-07)

Dennoch musst du nicht auf YouTube-Videos auf deinem Webprojekt verzichten. Durch folgende Aktionen ist es relativ sicher.

Nutze bei der Einbettung immer die „NoCookie“-Option. Erweitere in deinem CookieConsent den Erklärungstext um „YouTube-Videos werden erst nach akzeptieren und neuladen der Seite angezeigt.“ Erweitere deine Datenschutzerklärung um den Passus „Übrige Einbindung von Diensten und Inhalten Dritter“ Wenn du ein YouTube-Video mit dem Code (der dir von YouTube bereitgestellt wird) einbindest, dann ändere das Attribut „src“ zu „data-src“. So verhinderst du, dass die Seite geladen wirst.

<iframe src=“https://www.youtube-nocookie.com/embed/kZTP5_SMqD8?rel=0&showinfo=0“ width=“560″ height=“315″ frameborder=“0″ allowfullscreen=“allowfullscreen“></iframe>
<iframe data-src=“https://www.youtube-nocookie.com/embed/kZTP5_SMqD8?rel=0&showinfo=0“ width=“560″ height=“315″ frameborder=“0″ allowfullscreen=“allowfullscreen“></iframe>

Jetzt musst du nur noch folgenden JavaScript-Cod einfügen. Dieser lädt das YouTube-Video, wenn der CookieConsent akzeptiert wurde. Im Footer (vorausgesetzt du nutzt Jquery. Sonst muss die Ansprache des Tags angepasst werden).

<script>

if(hasAcceptedCookieConsent()){
   var ytelement = ‚.content iframe‘;
   var yturl = jQuery(ytelement).data(„src“);
   jQuery(ytelement).attr(’src‘,yturl);
}

function hasAcceptedCookieConsent(){
   var hasCookie;
   var ca = document.cookie.split(‚;‘);
   hasCookie = false;
   for (var i=0; i<ca.length; i++) {
       single = ca[i].split(‚=‘);
       cookie_name = single[0].trim();
       if(cookie_name===‚cookieconsent_dismissed‘){
           hasCookie = true;
       }
   }
   return hasCookie;
}

</script>

Im Grunde ist es eine Zwei-Klick Lösung. Das könnte sogar im Weitblick auf die EU-Privacy Richtline ab 2019 gut gelöst sein.

Weitere Beispiele

Klick Tipp

Der Newsletterversender hat das so gelöst:

(function ($) {
    
    $(document).ready(function () {
        getYoutubeAPI();
    
        $("[data-type='play-video']").click(function() {
            
            var src = $(this).data().videoSrc;
            var attr = "enablejsapi=1&rel=0&showinfo=0&iv_load_policy=3&playsinline=1";
            
            if (src.indexOf('?') !== -1) {
                src += '&'+attr;
            }
            
            else {
                src += '?'+attr;
            }
            
            var id = makeid();
            
            var iframe = $("<iframe id='" + id + "' src='" + src + "' frameborder='0' ></iframe>");
            $(this).next().replaceWith(iframe);
            
            $(this).hide();
            
            initPlayer(id)
                .then(function (player) {
                    addPlayEvent(player, iframe);
                    // player.player.playVideo();
                })
                .catch(function (error) {
                    console.log(error);
                })
        });
    
        let initPlayer = function (id) {
            return new Promise (function(resolve, reject) {
                let counter = 0;
                let player;
                let loading;
            
                let options = {
                    iframeSelector: "#" + id,
                    playbackControl: false
                };
            
                if ((typeof YT !== 'undefined') && typeof YT.Player !== 'undefined') {
                    player = new PlayerYT(options);
                    resolve(player)
                }
                else {
                    loading = setInterval(checkIframeAPILoaded, 250);
                }
            
                function checkIframeAPILoaded() {
                    if (typeof YT !== 'undefined' && YT.Player) {
                        clearInterval(loading);
                        player = new PlayerYT(options);
                        resolve(player);
                    }
                    counter++;
                }
            
                if (counter > 20) {
                    reject(new Error("Request to youtube iframe api timed out"));
                }
            })
        };
    
        let addPlayEvent = function (player, iframe) {
            
            player.onPlayerReadyCallbacks.push(function (event) {
                event.target.playVideo();
            });
            
        };
    
        function getYoutubeAPI() {
            var tag = document.createElement('script');
        
            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        
            var tag3 = document.createElement('script');
        
            tag3.src = "/content_includes/js/libs/lodash.js";
            var firstScriptTag3 = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag3, firstScriptTag3);
        
            var tag2 = document.createElement('script');
        
            tag2.src = "/content_includes/js/case_study/PlayerYT.js";
            var firstScriptTag2 = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag2, firstScriptTag2);
        
        }
    
        function makeid() {
            var text = "";
            var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        
            for (var i = 0; i < 5; i++)
                text += possible.charAt(Math.floor(Math.random() * possible.length));
        
            return text;
        }
    });
    
})(jQuery);

Im Quelltext legt er einen dicken Play Button über den Player. Ein Hinweis fehlt, aber das kann man natürlich anpassen.

<div style='position: absolute;
                        margin: auto;
                        top: 0;
                        left: 0;
                        bottom: 0;
                        right: 0;
                        z-index: 10;
                        width: 120px;
                        height: 90px;
                        background-image: url("/content_includes/img/webinar/ccp/youtube-play.png");
                        background-position: top center;
                        background-repeat: no-repeat;
                        background-size: contain;
                        cursor: pointer;
                        -webkit-animation: button-grow 1s infinite;
                        -moz-animation: button-grow 1s infinite;
                        -o-animation: button-grow 1s infinite;
                        animation: button-grow 1s infinite;
                        -moz-transform: translate(-50%, -50%);
                        -o-transform: translate(-50%, -50%);
                        -ms-transform: translate(-50%, -50%);
                        -webkit-transform: translate(-50%, -50%);
                        transform: translate(-50%, -50%);' class='youtube-play on-hover' data-type='play-video' data-video-src='//www.youtube.com/embed/uIqD4Gvv3HY?rel=0'>
  </div>
  <img class='video-thumbnail' src='data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD... normaes bild geht sicher auch'/>
</div>