Videos einbinden, ohne die Website auszubremsen und mit geringem Datenschutzrisiko

01Videos einbinden, ohne die Website auszubremsen: Vorschaubild zuerst, Player erst nach Klick

Wer Videos einbinden will, ohne die Website auszubremsen, zeigt zuerst nur ein Vorschaubild. Den Player von YouTube oder Vimeo lädt die Seite erst, wenn jemand klickt. Dazu kommen Untertitel, ein Transkript und eine Einwilligung vor der ersten Verbindung zur Plattform. So bleibt die Seite schnell, barrierefrei und datenschutzkonform.

Klick-zum-Laden ist eine Einbindung, bei der die Seite anfangs nur ein statisches Vorschaubild mit Abspielsymbol enthält. Der eigentliche Player wird erst nach einem Klick nachgeladen. Das WordPress-Plugin WP YouTube Lyte arbeitet nach diesem Prinzip. Laut IONOS-Anleitung zum Einbinden von Videos in WordPress zeigt es zunächst eine schlankere Vorschau und startet den vollständigen Player erst beim Klick.

Drei Fragen entscheiden über das Ergebnis. Wo liegt die Videodatei? Wann wird der Player geladen? Welche Texte begleiten das Video?

Die folgenden Abschnitte beantworten diese Fragen der Reihe nach. Sie finden dort ein Codebeispiel, eine Entscheidungstabelle, die Regeln für Einwilligung und Urheberrecht in Deutschland sowie die Vorgaben, nach denen Google Videos indexiert.

02Eingebettete YouTube-Player kosten Ladezeit und senden Daten schon vor dem Klick

Ein eingebetteter YouTube-Player lädt beim Seitenaufruf weit mehr als das Video selbst. Der Standard-Einbettungscode von YouTube lädt laut einer Analyse des Anbieters Decareto unter anderem die externen Dienste Doubleclick und Google Fonts nach. Doubleclick ist ein Google-Dienst zur Analyse des Nutzerverhaltens, mit dem Google personalisierte Werbung schaltet. Jede dieser zusätzlichen Verbindungen kostet Ladezeit, bevor überhaupt jemand auf Abspielen drückt.

Ein eingebetteter YouTube-Player überträgt außerdem Daten. Beim Standardeinbetten gehen personenbezogene Daten an YouTube und Google, sobald jemand die Seite aufruft. Dazu gehört die IP-Adresse, die nach der Rechtsprechung des Europäischen Gerichtshofs in der Regel ein personenbezogenes Datum ist.

Werbung ist ein weiterer Punkt. Ein DomainFactory-Beitrag von 2022 hält fest, dass YouTube Werbeanzeigen auch in eingebetteten Videos automatisch abspielt. Vimeo spielt laut demselben Beitrag in der kostenfreien Version keine Werbung ab, begrenzt dort aber den Upload.

Selbst gehostete Videos lösen das Ladezeitproblem nicht automatisch. IONOS warnt, dass zu große oder zu viele Videodateien in der WordPress-Mediathek Ladezeiten, Bandbreite und Serverressourcen deutlich belasten. Wie sich solche Verzögerungen auf Ihre Kontaktanfragen auswirken, zeigt der Beitrag Was eine langsame Website an Anfragen kostet und wie Sie den Verlust messen.

03Selbst hosten, Plattform oder Klick-zum-Laden: die Wege im Vergleich

Für ein Video auf der Firmenwebsite gibt es vier gängige Einbindungen, und sie unterscheiden sich vor allem darin, was beim Seitenaufruf passiert. Self-Hosting ist das Hosten von Videos auf dem eigenen Webserver statt auf einer fremden Videoplattform. Beim Fremdhosting laden Sie das Video bei einer Plattform wie Vimeo oder YouTube hoch und binden es per iFrame ein. Ein Einbettungscode ist der Code, den YouTube oder Vimeo dafür bereitstellt.

Die Tabelle zeigt den Kern der Entscheidung. Eigene Dateien verlagern die Last auf Ihren Server. Plattformen verlagern die Daten zu Dritten. Klick-zum-Laden verbindet die Entlastung durch die Plattform mit einem ruhigen Seitenaufruf. Das Vorschaubild ist zugleich der passende Ort für den Hinweis auf die Einwilligung.

Bei Klick-zum-Laden lädt beim Seitenaufruf nur ein Vorschaubild, das auf Ihrem eigenen Server liegt. Lädt das Plugin das Bild von YouTube (i.ytimg.com), geht die IP-Adresse schon vor der Einwilligung an Google. Speichern Sie das Vorschaubild deshalb lokal und prüfen Sie auch Anfragen an i.ytimg.com.

Quelle: df.eu

04Beispiel: ein Produktvideo selbst hosten mit dem HTML5-Element video

Das HTML5-Element video bindet ein Video ohne fremden Player und ohne Plugin in die Website ein. Das Element erlaubt mehrere source-Einträge, aus denen sich der Browser das passende Format aussucht. MP4 nennt der DomainFactory-Beitrag als das universellste Videoformat.

Der folgende Code bindet ein Produktvideo in zwei Formaten mit Vorschaubild und Steuerelementen ein. Fügen Sie ihn in den HTML-Bereich der Seite ein, in WordPress etwa in einen HTML-Block.

<video controls width="1280" height="720" poster="/videos/produktvideo-vorschau.webp">
  <!-- Der Browser sucht sich das passende Format aus -->
  <source src="/videos/produktvideo.webm" type="video/webm">
  <source src="/videos/produktvideo.mp4" type="video/mp4">
  <!-- Text für Browser ohne Videounterstützung -->
  <a href="/videos/produktvideo.mp4">Produktvideo herunterladen</a>
</video>

Anpassen müssen Sie vor allem diese Stellen:

• poster verweist auf das Vorschaubild. Ersetzen Sie den Pfad durch Ihr eigenes, gut komprimiertes Bild.
• width und height legen Breite und Höhe fest. Tragen Sie die echten Maße Ihres Videos ein.
• src in den beiden source-Zeilen enthält den Pfad zur jeweiligen Videodatei.
• type gibt das Format an und muss zur Datei passen.
• controls zeigt Start, Pause und Lautstärkeregelung an. Lassen Sie dieses Attribut immer stehen.

Die Attribute autoplay und loop gibt es für Hintergrundvideos. Bei einem Erklärvideo lassen Sie beide weg, damit Besucher selbst entscheiden, wann es läuft. Wie Sie das Vorschaubild in Format und Größe optimieren, zeigt der Beitrag Bilder für die Website richtig optimieren.

Quelle: google.com

05YouTube und Vimeo mit Vorschaubild, erweitertem Datenschutzmodus und rel=0 einbinden

YouTube- und Vimeo-Videos binden Sie am saubersten über den Einbettungscode statt über die bloße URL ein. Laut IONOS lassen sich nur mit dem Einbettungscode zusätzliche Einstellungen festlegen, etwa ein fester Startpunkt oder der erweiterte Datenschutzmodus. Für die einfache URL-Einbindung muss das Video öffentlich sein und das Einbetten erlaubt. Sonst zeigt WordPress eine Fehlermeldung oder macht aus der URL einen bloßen Link.

Erweiterten Datenschutzmodus aktivieren

Der erweiterte Datenschutzmodus ist eine Option im YouTube-Einbettungsdialog. Der Code verwendet dann die Domain www.youtube-nocookie.com statt www.youtube.com. Die Checkbox dafür ist standardmäßig nicht markiert, Sie müssen sie also bewusst setzen. Im Test von Decareto gingen danach keine Aufrufe an www.youtube.com und doubleclick.net mehr ab.

Vorschläge fremder Kanäle mit rel=0 abschalten

Der Parameter rel=0 am Ende der Einbettungs-URL unterdrückt Vorschläge von fremden Kanälen. Laut der YouTube-Community zu Vorschlägen in eingebetteten Videos zeigt YouTube dann noch Videos des eigenen Kanals. Wirkt die Änderung scheinbar nicht, löschen Sie Browser-Cache und Cookies und laden die Seite neu.

Klick-zum-Laden in WordPress

WP YouTube Lyte braucht einen YouTube-API-Schlüssel, den Sie kostenlos in der Google Developer Console erstellen. Ohne den Schlüssel lädt das Plugin keine Videotitel, beschreibenden Metadaten und Playlist-Vorschaubilder. Bei Svennis öffnen wir nach jedem Videoeinbau die Entwicklerwerkzeuge des Browsers und prüfen vor dem ersten Klick, ob schon Anfragen an youtube.com, youtube-nocookie.com oder doubleclick.net abgehen. Dabei stoßen wir am häufigsten auf ein zweites, vergessenes Einbettungs-Plugin, das den Player trotz Vorschaubild vorlädt.

06Einwilligung für eingebettete Videos: was Unternehmen in Deutschland beachten

Für Unternehmen in Deutschland gilt beim YouTube-Video eine Einwilligung vor dem Laden des Players als erforderlich, auch im erweiterten Datenschutzmodus. IONOS hält fest, dass auch im No-Cookie-Modus Verbindungen zu Google-Servern entstehen und personenbezogene Daten fließen. Der Modus sei datenschutzfreundlicher als die Standardeinbettung, reiche allein aber nicht für vollständige DSGVO-Konformität.

Ein zweiter Grund liegt im Browser: YouTube schreibt laut Decareto auch im erweiterten Datenschutzmodus Daten in den Local Storage. Local Storage ist der Web-Speicher des Browsers. Er ist technisch kein Cookie, fällt aber wie Cookies unter § 25 des Telekommunikation-Digitale-Dienste-Datenschutzgesetzes (TDDDG). Das Speichern und Auslesen von Informationen im Endgerät ist danach nur mit Einwilligung zulässig. Ausgenommen ist, was für den ausdrücklich gewünschten Dienst unbedingt erforderlich ist.

Für die Datenschutzerklärung sind drei Punkte wichtig:

• Google LLC ist seit Juli 2023 nach dem EU-US Data Privacy Framework zertifiziert. Die Übermittlung in die USA lässt sich derzeit auf den Angemessenheitsbeschluss der Europäischen Kommission vom 10. Juli 2023 stützen. Gegen diesen Beschluss ist ein Rechtsmittel beim Europäischen Gerichtshof anhängig. Prüfen Sie den Stand daher vor jeder Aktualisierung Ihrer Datenschutzerklärung.
• Zur Speicherdauer der Daten macht Google laut Decareto keine klare Aussage.
• Unter den YouTube-Varianten ist laut Decareto nur der bloße Link ohne Hinweis in der Datenschutzerklärung möglich.

Wie ernst Gerichte nachgeladene Google-Dienste nehmen, zeigt ein Urteil zu Schriften. Das Landgericht München I hat mit Urteil vom 20. Januar 2022 (Az. 3 O 17493/20) die Weitergabe der IP-Adresse an Google durch dynamisch nachgeladene Google Fonts ohne Einwilligung als rechtswidrig beurteilt. Der Standard-Einbettungscode von YouTube lädt genau diese Schriften nach.

Wie Sie Schriften auf der eigenen Website umstellen, beschreibt der Beitrag Google Fonts lokal einbinden. Banner und Einwilligungsverwaltung insgesamt behandelt unser Beitrag zur DSGVO auf der Firmenwebsite.

07Fremde Videos einbetten: wann das Urheberrecht eine Rolle spielt

Das Einbetten eines frei veröffentlichten Videos ist urheberrechtlich grundsätzlich unproblematisch. Embedding ist das Einbinden eines Videos, das auf der eigenen Seite erscheint, aber an der Originalquelle bleibt und von dort gestreamt wird. Das Video wird also nicht kopiert.

Der Europäische Gerichtshof bewertet das Einbetten frei zugänglicher Inhalte grundsätzlich wie einen Link. Das gilt laut iRights.info zum Einbetten von YouTube-Videos auch dann, wenn Zuschauer meinen, das Video stamme von der einbindenden Website. Anders ist es, wenn der Rechteinhaber das Einbetten technisch unterbindet und diese Sperre umgangen wird.

Ein Risiko entsteht bei Videos, die ohne Einverständnis des Rechteinhabers hochgeladen wurden. Dann kann auch das Einbetten oder Verlinken Urheberrechte verletzen. Wer mit Gewinnerzielungsabsicht einbettet, etwa auf einer Firmenwebsite, muss nach dem Europäischen Gerichtshof vorher prüfen, ob das Video rechtmäßig online steht. Andernfalls wird vermutet, dass er von einem unerlaubten Upload wusste, wobei diese Vermutung widerlegt werden kann. Rechteinhaber gehen nach Einschätzung von iRights.info allerdings meist eher gegen die Plattform oder den ursprünglichen Uploader vor.

Unabhängig vom Urheberrecht sind Videos mit eindeutig rechtswidrigem Inhalt tabu. iRights.info nennt strafbare pornografische Inhalte, gewaltverherrlichende Videos und verfassungsfeindliche Symbole. Der Beitrag stammt von 2011 und wurde im Juni 2017 aktualisiert. Für ein eigenes Produkt- oder Erklärvideo stellt sich die Frage ohnehin kaum. Bei fremden Kundenstimmen oder Messevideos klären Sie die Rechte vor dem Einbetten.

08Wie Google eingebettete Videos findet und indexiert

Google findet Videos, auf die ein video-, embed-, iframe- oder object-Element verweist. Das steht in den Best Practices von Google Search Central für Videos. Erzeugt Ihre Seite den Player erst nach einem Klick, beschreiben Sie das Video deshalb zusätzlich über Metadaten. Google unterstützt dafür strukturierte Daten, Video-Sitemaps und das Open Graph Protocol.

Eine Wiedergabeseite ist eine Seite, deren Hauptzweck darin besteht, ein einzelnes Video zu zeigen. Diese Seite muss in der Google Suche gut abschneiden, bevor Google das Video überhaupt für die Indexierung berücksichtigt. Ein Video auf einer schwachen Seite bleibt also unsichtbar. Bei Videos von YouTube, Vimeo oder Facebook kann Google das Video sowohl auf Ihrer Seite als auch auf der Plattform indexieren.

Für die technische Umsetzung nennt Google diese Regeln:

• Keine Fragmentbezeichner zum Laden des Videos verwenden, da die Suche URL-Fragmente im Allgemeinen nicht unterstützt.
• Keine Daten-URLs für Videos verwenden, sie werden nicht unterstützt.
• Die Thumbnail-URL stabil halten, denn häufige Änderungen können die Indexierung verhindern.
• Vorschaubilder mindestens 60 x 30 Pixel groß anlegen, bevorzugt größer, in BMP, GIF, JPEG, PNG, WebP, SVG oder AVIF.
• Ein Ablaufdatum nur setzen, wenn das Video danach aus den Videoergebnissen verschwinden soll.

Zwei Meta-Tags steuern die Darstellung. max-video-preview begrenzt die Dauer der bewegten Videovorschau. nosnippet schaltet die Funktion „Wichtige Momente“ ab, mit der Nutzer einzelne Abschnitte wie Buchkapitel aufrufen.

09Untertitel, Transkript und Audiodeskription: was barrierefreie Videos brauchen

Ein barrierefreies Video braucht Untertitel, ein Transkript und eine Beschreibung der visuellen Inhalte. Die Anforderungen der W3C-Initiative WAI zu barrierefreien Audio- und Videomedien beruhen auf dem Standard WCAG.

• Untertitel sind eine Textfassung der gesprochenen Sprache und der übrigen Tonspur. Sie richten sich an gehörlose und schwerhörige Menschen.
• Ein Transkript ist dieselbe Textfassung als eigenständiger Text neben dem Video.
• Ein beschreibendes Transkript enthält zusätzlich eine Textbeschreibung der Bildinhalte. Nur so erreicht das Video Menschen, die gehörlos und blind sind.
• Audiodeskription beschreibt die visuellen Informationen für Menschen, die das Video nicht ausreichend sehen können.
• Gebärdensprache gibt gehörlosen Menschen den Inhalt in ihrer Erstsprache.

Beschrieben werden müssen laut WAI etwa Diagramme, Grafiken und eingeblendeter Text. Dazu gehören Namen und Funktionen von Sprechern sowie E-Mail-Adressen. Am einfachsten ist eine integrierte Beschreibung: Die Sprecherin nennt Wichtiges direkt im Video. Das muss allerdings schon vor dem Dreh im Skript stehen.

Die WAI rät, Barrierefreiheit von Projektbeginn an einzuplanen, weil das Zeit und Geld spart. Spielen Sie das Video außerdem in einem Player ab, der Barrierefreiheit unterstützt. Bei Klick-zum-Laden gilt das auch für das Vorschaubild, über das der Player startet. Was wir bei Videos, Bedienelementen und Texten im Relaunch konkret prüfen, beschreibt der Beitrag Barrierefreie Website nach WCAG 2.1 AA: Was wir im Relaunch wirklich prüfen.

10Nächste Schritte: Videos auf Ihrer Website prüfen und umstellen

Beginnen Sie mit einer Bestandsaufnahme aller Videos auf Ihrer Website. Notieren Sie für jedes Video die Seite, die Plattform und die Art der Einbindung. Die Liste zeigt schnell, wo ein Standard-Einbettungscode beim Seitenaufruf Daten überträgt.

Gehen Sie danach in dieser Reihenfolge vor:

1. Öffnen Sie jede Seite mit Video und prüfen Sie in den Entwicklerwerkzeugen des Browsers, welche Verbindungen vor dem ersten Klick entstehen.
2. Stellen Sie YouTube-Videos auf Vorschaubild mit Klick-zum-Laden um und aktivieren Sie den erweiterten Datenschutzmodus.
3. Holen Sie die Einwilligung ein, bevor der Player lädt, und ergänzen Sie die Datenschutzerklärung.
4. Ergänzen Sie Untertitel und ein Transkript, bei erklärenden Grafiken auch eine Beschreibung der Bildinhalte.
5. Beschreiben Sie wichtige Videos mit strukturierten Daten oder einer Video-Sitemap und halten Sie die URL des Vorschaubilds stabil.
6. Prüfen Sie eingebettete Videos regelmäßig, denn YouTube löscht Videos, die es für gefährlich, gewalttätig oder pornografisch hält.

Nutzen Sie bei Vimeo eine praktische Funktion: Sie können ein gehostetes Video ändern oder aktualisieren, ohne dass sich Link oder Einbettungscode ändern. Ein überarbeitetes Erklärvideo erscheint dann auf allen Seiten, ohne dass Sie den Code anfassen.

Wenn mehrere Seiten betroffen sind oder das Theme Videos fest einbaut, lohnt sich ein Blick auf die gesamte Website. Wie wir Ladezeit, Barrierefreiheit und Datenschutz in einem Durchgang angehen, beschreibt die Seite Website-Relaunch und Webdesign bei Revylio.

11Quellen

• W3C WAI: Making Audio and Video Media Accessible
• Google Search Central: Best Practices für die Suchmaschinenoptimierung für Videos
• IONOS Digital Guide: WordPress Video einbinden
• Decareto: Wie man YouTube DSGVO-konform einbinden kann
• DomainFactory Blog: Wie Sie in Websites Videos einbinden, mit HTML5, YouTube und Co.
• iRights.info: Darf ich Videos von YouTube in meine Webseite einbetten?
• YouTube-Community: Vorschläge für ähnliche Videos bei eingebetteten Videos unterdrücken