YouTube, Google Maps und andere Embeds: So laden Sie sie erst nach der Einwilligung

Eingebettete YouTube-Videos, Google Maps und Social-Media-Beiträge laden Code von Drittanbietern in dem Moment, in dem die Seite gerendert wird, und dieser Code kann Cookies setzen und Besucherdaten an den Anbieter senden. Um sie in der EU und im Vereinigten Königreich rechtskonform einzubetten, zeigen Sie zuerst einen lokalen Platzhalter und laden das eigentliche Embed erst, nachdem der Besucher eingewilligt oder zum Laden geklickt hat. Der erweiterte Datenschutzmodus von YouTube hilft, ersetzt aber keine Einwilligung.

Warum brauchen Embeds eine Einwilligung?

Ein Embed ist ein Fenster in die Website eines anderen. Wenn der Browser einen iframe von youtube.com oder google.com rendert, fordert er Seite, Skripte und Bilder des Anbieters an, sendet IP-Adresse und Browserdaten des Besuchers und lässt den Anbieter seine eigenen Cookies und Speichereinträge lesen und schreiben. Nichts davon wartet auf Ihren Banner.

Damit unterliegen Embeds denselben Einwilligungsregeln wie Tracking-Skripte. Wer Informationen auf dem Gerät des Besuchers zu anderen als unbedingt erforderlichen Zwecken speichert oder ausliest, braucht eine Einwilligung, gleich mit welcher Technologie; wie weit diese Regel reicht, lesen Sie unter Gilt die Cookie-Einwilligung auch für localStorage, Pixel und Fingerprinting?

Sie sind auch für die Entscheidung verantwortlich, etwas einzubetten. Im Fall Fashion ID (C-40/17) entschied der EuGH, dass eine Website, die den Like-Button von Facebook eingebunden hatte, für die Erhebung der Besucherdaten und deren Übermittlung an Facebook gemeinsam mit Facebook verantwortlich war. Dieselbe Logik gilt für andere Embeds, die Daten an ihren Anbieter senden.

Reicht youtube-nocookie.com aus?

Nein. Der erweiterte Datenschutzmodus von YouTube, den Sie aktivieren, indem Sie die Embed-Domain in www.youtube-nocookie.com ändern, bewirkt, dass Aufrufe des eingebetteten Videos nicht genutzt werden, um das YouTube-Erlebnis des Zuschauers oder die Werbung, die er anderswo sieht, zu personalisieren. Das ist eine echte Verbesserung.

Er verhindert jedoch nicht, dass der Player von Googles Servern geladen wird oder den Browserspeicher nutzt, und die Daten des Besuchers erreichen Google weiterhin, sobald der iframe lädt. Verwenden Sie den erweiterten Datenschutzmodus als die URL, die Sie nach der Einwilligung laden, nicht als Grund, den Player ohne Einwilligung zu laden.

Was lädt jedes gängige Embed?

Jeder große Embed-Anbieter lädt eigenen Code und kann eigene Kennungen setzen. Diese Tabelle zeigt die üblichen Alternativen, die ohne Einwilligung auskommen.

Embed	Was vor einer Interaktion lädt	Alternative ohne Einwilligung
YouTube-Video	Player-Seite, Skripte, Vorschaubilder, Google-Cookies oder -Speichereinträge	Selbst gehostetes Vorschaubild mit Click-to-Load-Button
Vimeo-Video	Player-Seite, Skripte, Analyse	Selbst gehostetes Vorschaubild oder die Do-not-Track-Option des Vimeo-Players, nachdem Sie geprüft haben, was sie abdeckt
Google Maps	Kartenkacheln, Skripte, Google-Cookies	Statisches Kartenbild und ein Link zur Routenplanung
Social-Media-Beiträge (X, Instagram, Facebook)	Anbieter-Skript, das den Beitrag umbaut	Der statische HTML-Fallback, den der Anbieter mitliefert
Chat- und Buchungs-Widgets	Anbieter-Skript, oft mit Session-Tracking	Ein Button, der das Widget auf Anfrage öffnet

Wie baue ich einen Click-to-Load-Platzhalter?

Rendern Sie einen Platzhalter, der wie das Embed aussieht, erklärt, was passieren wird, und einen echten Button enthält. Legen Sie die Embed-URL in einem Data-Attribut ab, damit der Browser sie nicht anfordert.

<div class="embed" data-consent="marketing"
     data-embed-src="https://www.youtube-nocookie.com/embed/VIDEO_ID?autoplay=1"
     data-embed-title="Produktdemo-Video">
  <img src="/images/demo-thumbnail.jpg" alt="" width="560" height="315">
  <p>Dieses Video wird von YouTube gehostet. Beim Abspielen werden Inhalte von Google geladen,
     und Google kann Cookies setzen. <a href="/cookie-policy">Mehr erfahren</a></p>
  <button type="button" class="embed-load">Video abspielen</button>
  <label><input type="checkbox" class="embed-remember"> YouTube-Videos immer erlauben</label>
</div>

Ersetzen Sie den Platzhalter dann beim Klick durch den iframe, oder alle Platzhalter einer Kategorie, sobald der Besucher über Ihren Banner einwilligt:

function loadEmbed(placeholder) {
  const frame = document.createElement('iframe');
  frame.src = placeholder.dataset.embedSrc;
  frame.title = placeholder.dataset.embedTitle;
  frame.width = '560';
  frame.height = '315';
  frame.allow = 'autoplay; encrypted-media; picture-in-picture';
  frame.allowFullscreen = true;
  placeholder.replaceWith(frame);
  frame.focus(); // Tastaturnutzer bleiben an derselben Stelle
}

document.addEventListener('click', (event) => {
  const button = event.target.closest('.embed-load');
  if (!button) return;
  const placeholder = button.closest('.embed');
  if (placeholder.querySelector('.embed-remember')?.checked) {
    grantConsent(placeholder.dataset.consent); // Ihr Consent-Layer; lädt die übrigen
  }
  loadEmbed(placeholder);
});

// Aus den Handlern Ihres Banners aufrufen, wenn eine Kategorie erteilt wird
function activateEmbeds(category) {
  document.querySelectorAll(`.embed[data-consent="${category}"]`).forEach(loadEmbed);
}

Ein paar Details entscheiden darüber, ob ein Platzhalter funktioniert oder nervt:

• Vorschaubild selbst hosten. Ein Hotlink auf das YouTube-Vorschaubild sendet einen Request an Google, bevor eine Entscheidung gefallen ist.
• Platz reservieren. Geben Sie dem Platzhalter dieselben Abmessungen wie dem iframe, um Layout Shifts beim Austausch zu vermeiden.
• Den Anbieter nennen. Erst ein konkreter Hinweis („gehostet von YouTube“) macht den Klick zu einer informierten Entscheidung.
• Dauerhafte Entscheidungen protokollieren. Setzt der Besucher das Häkchen bei „immer erlauben“, speichern Sie das über Ihren Consent-Layer und protokollieren Sie es wie jede andere Bannerentscheidung.

Das allgemeine Muster, Skripte zurückzuhalten, beschreibt der Beitrag Drittanbieter-Skripte bis zur Einwilligung blockieren.

Wie gehe ich mit Social-Media-Beiträgen und Karten um?

Die meisten Social-Media-Embeds bringen bereits einen statischen Fallback mit. Ein eingebetteter Beitrag auf X ist zum Beispiel ein blockquote mit dem Text des Beitrags, den das Widget-Skript des Anbieters später in eine aufwendig gestaltete Karte verwandelt. Behalten Sie das blockquote und laden Sie das Widget-Skript erst nach der Einwilligung:

<blockquote class="twitter-tweet">
  <p>Text des Beitrags, Autor und Datum, wie im Embed-Code angegeben.</p>
  <a href="https://x.com/example/status/1234567890">Beitrag ansehen</a>
</blockquote>

<!-- Inaktiv, bis die Kategorie Marketing erteilt ist -->
<script type="text/plain" data-consent="marketing"
        src="https://platform.twitter.com/widgets.js"></script>

Bei Karten deckt ein statisches Bild des Standorts plus ein Link „In Google Maps öffnen“ die meisten Anforderungen ab, ohne irgendetwas von Google zu laden. Brauchen Sie eine interaktive Karte, verwenden Sie denselben Click-to-Load-Platzhalter wie für Videos.

Verbessert Click-to-Load die Performance?

Ja. Videoplayer und Karten-Widgets gehören auf vielen Seiten zu den schwersten Elementen, oft mit Hunderten Kilobyte JavaScript. Werden sie nur geladen, wenn jemand sie anfordert, entfallen diese Kosten für jeden Besucher, der einfach weiterscrollt. Das hilft Metriken wie Largest Contentful Paint und Interaction to Next Paint. Mehr dazu, wie Consent-Tools schnell bleiben, lesen Sie unter Cookie-Banner und Core Web Vitals.

Fazit

Jedes Embed ist ein Drittanbieter-Request und meist auch Drittanbieter-Speicher. Behandeln Sie es daher wie jeden anderen Tracker: Vor der Einwilligung lädt nichts. Ersetzen Sie Embeds durch barrierefreie, selbst gehostete Platzhalter, laden Sie das Original, wenn der Besucher klickt oder einwilligt, und behalten Sie statische Fallbacks für Social-Media-Beiträge und Karten. Tools wie Cookiesh können iframes wie Videos und Karten bis zur Einwilligung zurückhalten, und der Scanner listet Embed-Anbieter neben Ihren anderen Drittanbieter-Requests auf, sodass Sie sehen, welche Seiten Platzhalter brauchen.

Dieser Artikel dient der allgemeinen Information und stellt keine Rechtsberatung dar. Für Entscheidungen zu Ihrer konkreten Situation wenden Sie sich an qualifizierte Datenschutzfachleute.