Youtube Videos DSGVO konform einbinden

Hier ein einfacher Code um Youtube Videos DSGVO konform einzubinden.

Die Einbindung von YouTube-Videos in WordPress sollte DSGVO-konform erfolgen, weil:

1. Beim direkten Einbetten eines YouTube-Videos werden sofort beim Laden der Seite Daten der Besucher an YouTube/Google übertragen – ohne dass diese zugestimmt haben. Dies geschieht durch Cookies und Tracking-Mechanismen.
2. Nach der DSGVO müssen Nutzer aktiv einwilligen, bevor ihre personenbezogenen Daten an Drittanbieter (in diesem Fall YouTube/Google) übermittelt werden dürfen.

Die gezeigte Lösung ist DSGVO-konform, weil:

• Zunächst nur ein Vorschaubild geladen wird, das keine Daten an YouTube überträgt
• Der Besucher wird informiert, dass durch Klick auf den Play-Button Daten an YouTube übertragen werden
• Erst nach aktivem Klick auf den Play-Button (Einwilligung) wird das eigentliche Video von YouTube geladen
• Es wird youtube-nocookie.com statt youtube.com verwendet, was ein datensparsameres Embedding ermöglicht

Diese Zwei-Klick-Lösung schützt also die Privatsphäre der Webseitenbesucher und erfüllt gleichzeitig die Anforderungen der DSGVO an eine aktive Einwilligung vor Datenübertragung.

Füge es deiner function.php hinzu und passe evtl. das CSS Layout an.

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube. Datenschutzerklärung

/*
 * Youtube Videos im 16:9 Format DSGVO konform einbinden
 * ändert autom. die Standard Video Ausgabe von WordPress
 * by Conny Henn, 2025
 */
function dsgvo_youtube_content_filter($content) {
   $pattern = '/<iframe[^>]*youtube(-nocookie)?\.com\/embed\/([^\?"]+)[^>]*><\/iframe>/i';
   return preg_replace_callback($pattern, 'replace_youtube_iframe', $content);
}

function replace_youtube_iframe($matches) {
   $youtube_id = $matches[2];
   $thumbnail = "https://i.ytimg.com/vi/$youtube_id/hqdefault.jpg";
   
   // Video-Titel via API abrufen
   $api_url = "https://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=" . $youtube_id . "&format=json";
   $response = wp_remote_get($api_url);
   $video_data = json_decode(wp_remote_retrieve_body($response));
   $title = isset($video_data->title) ? $video_data->title : 'Video abspielen';
   
   $html = '<div class="dsgvo-youtube-container" data-id="' . $youtube_id . '">';
   $html .= '<div class="preview-container">';
   $html .= '<img src="' . $thumbnail . '" alt="' . esc_attr($title) . '" loading="lazy">';
   $html .= '<div class="overlay">';
   $html .= '<h3 class="video-title">' . esc_html($title) . '</h3>';
   $html .= '<p>Mit dem Abspielen des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.</p>';
   $html .= '<button class="load-video">Video abspielen</button>';
   $html .= '</div></div>';
   $html .= '<div class="video-container" style="display:none;"></div></div>';
   
   return $html;
}

add_action('wp_head', function() { ?>
   <style>
       .dsgvo-youtube-container { 
           position: relative;
           width: 100%;
           max-width: 640px;
           margin: 20px auto;
       }
       .dsgvo-youtube-container::before {
           content: "";
           display: block;
           padding-top: 56.25%; /* 16:9 Aspect Ratio */
       }
       .preview-container { 
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
       }
       .preview-container img { 
           width: 100%;
           height: 100%;
           object-fit: cover;
       }
       .overlay { 
           position: absolute;
           top: 0; left: 0; right: 0; bottom: 0;
           background: rgba(0,0,0,0.3);
           color: white;
           padding: 20px;
           text-align: center;
           display: flex;
           flex-direction: column;
           justify-content: center;
       }
       .load-video {
           background: red;
           color: white;
           border: none;
           padding: 10px 20px;
           margin: 10px auto;
           cursor: pointer;
           border-radius: 4px;
           max-width: 200px;
       }
       .video-container {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
       }
       .video-container iframe {
           width: 100%;
           height: 100%;
           position: absolute;
           top: 0;
           left: 0;
       }
       .video-title {
           margin: 0 0 15px 0;
           padding: 0 20px;
           font-size: 18px;
           line-height: 1.4;
           color: white;
           text-align: center;
           background: rgba(255,255,255,0.5);
       }
   </style>

   <script>
       document.addEventListener('DOMContentLoaded', function() {
           document.querySelectorAll('.load-video').forEach(button => {
               button.addEventListener('click', function() {
                   const container = this.closest('.dsgvo-youtube-container');
                   const videoId = container.dataset.id;
                   const iframe = document.createElement('iframe');
                   
                   iframe.src = `https://www.youtube-nocookie.com/embed/${videoId}`;
                   iframe.frameBorder = '0';
                   iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
                   iframe.allowFullscreen = true;

                   container.querySelector('.preview-container').style.display = 'none';
                   container.querySelector('.video-container').style.display = 'block';
                   container.querySelector('.video-container').appendChild(iframe);
               });
           });
       });
   </script>
<?php });

add_filter('the_content', 'dsgvo_youtube_content_filter');