Video einbetten mit Klick zum Laden

Ein gewöhnlich eingebettetes Video spricht mit der Videoplattform, sobald Ihre Seite sich öffnet, ob jemand zuschaut oder nicht. Dieser Generator schreibt eines, das still bleibt, bis ein Besucher auf Play drückt.

Jede YouTube-Form funktioniert (watch?v=, youtu.be, shorts, embed, auch mit Startzeit t=), ebenso ein Vimeo-Link, auch ein nicht gelisteter mit einem h=-Code.

Was der Code tun soll

Der Code wird von Ihrem Browser erzeugt. Der eingefügte Link wird weder an unseren Server noch an sonst jemanden übertragen.

Was eine normale Einbettung tut, bevor jemand zuschaut

Das Snippet, das Sie aus dem Teilen-Menü eines Videos kopieren, ist ein <iframe>, ein kleines Fenster auf eine andere Website, eingesetzt in Ihre Seite. Der Browser füllt dieses Fenster, sobald er die Seite zeichnet. Für ein YouTube-Video sind das rund zwanzig Anfragen und mehrere hundert Kilobyte Skript, von Google-Servern geladen, für jeden Besucher, auch für alle, die einfach vorbeiscrollen.

Jede dieser Anfragen trägt die IP-Adresse des Besuchers und die Adresse Ihrer Seite. Der Player kann außerdem seinen eigenen Speicher im Browser lesen und beschreiben. Ihre Seite wird also langsamer, und Ihre Besucher werden von einem Unternehmen wahrgenommen, das sie nie kontaktieren wollten.

Die zwei Arten von Code, die dieses Tool schreibt

Klick zum Laden
Ihre Seite bekommt einen Link, der wie ein Videorahmen aussieht, mit Vorschaubild, Play-Dreieck und barrierefreier Beschriftung. Ein kurzes Skript, einmal eingebunden, wartet auf einen Klick auf diesen Link und setzt erst dann den echten Player mit autoplay=1 ein, sodass auf den meisten Geräten ein Druck genügt. Fehlt das Skript oder wird es blockiert, funktioniert der Link trotzdem und öffnet das Video auf der Plattform in einem neuen Tab.
Einfacher iframe auf der Domain mit erweitertem Datenschutz
Gar kein Skript. Der Player lädt mit der Seite, aber von youtube-nocookie.com oder von Vimeo mit dnt=1, und mit loading="lazy", sodass ein Video weit unten auf der Seite wartet, bis der Besucher in seine Nähe scrollt.

In beiden Fällen sitzt der Player in einer Box, deren Größe die CSS-Eigenschaft aspect-ratio bestimmt. Er skaliert also mit jeder Spalte, in die Sie ihn setzen. Ein /shorts/-Link wird erkannt und bekommt eine 9:16-Box mit höchstens 360 Pixeln Breite.

Ihre WahlYouTube-ParameterVimeo-Parameter
Startzeitstart=90#t=90s
Untertitel ancc_load_policy=1, cc_lang_preftexttrack=en
Sprache des Playershl=ennicht verfügbar
Vorschläge nur vom eigenen Kanalrel=0nicht nötig
Nicht gelistetes Videofunktioniert soh=-Code aus dem Link übernommen

Das Vorschaubild ist das letzte Leck

Bei YouTube verweist der Code mit Klick zum Laden standardmäßig auf das Vorschaubild des Videos auf i.ytimg.com. Dieser Server gehört Google. Er setzt kein Cookie, sieht aber die IP-Adresse des Besuchers, wenn das Bild lädt. Um auf null Anfragen an Dritte zu kommen, speichern Sie ein Standbild des Videos, laden es auf Ihre eigene Website hoch und fügen seine Adresse in das Feld für das Vorschaubild ein. Verwenden Sie eine https://-Adresse, denn Browser verweigern unsichere Bilder auf sicheren Seiten.

Vimeo hat keine vorhersagbare Adresse für Vorschaubilder. Der Standard ist dort deshalb ein dunkler Rahmen mit Ihrem Titel. Dasselbe Feld ersetzt ihn durch ein Bild.

Die Begriffe „erweiterter Datenschutz“ und „no cookie“ beschreiben, was vor der Wiedergabe passiert. Sobald ein Besucher auf Play drückt, wird das Video von YouTube oder Vimeo gestreamt, die dann die üblichen technischen Daten dieses Besuchers erhalten. Klick zum Laden ändert daran nichts. Es überlässt die Entscheidung dem Besucher.

Den Code in Ihre Website einfügen

Die Ausgabe ist einfaches HTML mit Inline-Styles und hängt daher nicht von Ihrem Theme ab.

  • WordPress: Fügen Sie einen Block „Individuelles HTML“ hinzu und fügen Sie den Code ein. Administratoren können den <script>-Teil speichern, aber bei Konten mit der Rolle Redakteur in einem Multisite-Netzwerk wird er beim Speichern womöglich entfernt. Passiert das, verlinkt das Vorschaubild trotzdem auf das Video, oder Sie wechseln zum einfachen iframe.
  • Squarespace, Wix, Webflow, Shopify: Verwenden Sie den Code- oder Embed-Block, nicht den eingebauten Videoblock, der den Standard-Player gleich wieder mitbringen würde.
  • Statisches HTML: Fügen Sie den Code dort ein, wo das Video hingehört. Bei mehreren Videos auf einer Seite fügen Sie jedes Snippet vollständig ein. Das Skript prüft, ob es bereits gelaufen ist.
  • Content-Security-Policy: Erlauben Sie www.youtube-nocookie.com oder player.vimeo.com in frame-src. Eine Richtlinie, die Inline-Skripte verbietet, blockiert das Skript für Klick zum Laden. Verschieben Sie es dann in eine Datei, die Sie selbst ausliefern.

Füllen Sie immer das Titelfeld aus. Es wird zum title des iframes und zur Beschriftung des Play-Links, und genau das sagt ein Screenreader an. Bleibt es leer, hört der Zuhörer nur „YouTube video“.

Häufige Fragen

Setzt youtube-nocookie.com wirklich keine Cookies?

Solange der Player ruht, setzt es keine Tracking-Cookies. Das Player-Skript lädt trotzdem von Google und kann den lokalen Speicher des Browsers nutzen. Nachdem der Besucher auf Play gedrückt hat, behandelt YouTube die Sitzung ziemlich wie jeden anderen Aufruf. Nur die Version mit Klick zum Laden sendet vor dem Klick gar nichts.

Brauche ich für ein eingebettetes Video trotzdem eine Cookie-Einwilligung?

Das hängt vom Recht ab, das für Sie gilt, und das ist eine Rechtsfrage, die dieses Tool nicht klären kann. Technisch gesehen stellt die Einbettung mit Klick zum Laden und einem Vorschaubild auf Ihrer eigenen Website keine Anfrage an Dritte, bis der Besucher handelt. Das ist das Verhalten, das die meisten Einwilligungsregeln verlangen. Erwähnen Sie die Videoplattform in Ihrer Datenschutzerklärung.

Warum braucht das Video auf manchen Handys zwei Fingertipps?

Der Code bittet den Player, nach dem Klick automatisch zu starten. Manche mobilen Browser und Handys im Energiesparmodus blockieren Autoplay mit Ton in einem iframe. Der Player erscheint dann pausiert und braucht einen zweiten Tipp.

Macht eine Einbettung mit Klick zum Laden meine Seite schneller?

Ja, und Sie können es messen. Die Seite lädt die Player-Skripte nicht mehr vorab herunter. Das spart pro Video mehrere hundert Kilobyte und einen guten Teil der Arbeit im Haupt-Thread. Vergleichen Sie vorher und nachher mit der Aufschlüsselung der Seitengröße.

Mein Vimeo-Video zeigt in der Vorschau einen Fehler. Warum?

Das Video ist wahrscheinlich nicht gelistet oder eingeschränkt. Verwenden Sie den Link aus Vimeos Teilen-Schaltfläche, der wie vimeo.com/123456789/abc123def4 aussieht. Der zweite Teil ist ein Schlüssel, den der Player braucht. Ist das Video auf bestimmte Domains beschränkt, fügen Sie Ihre Website in den Datenschutzeinstellungen des Videos bei Vimeo hinzu.

Kann ich statt eines Links einen vollständigen iframe-Code einfügen?

Ja. Enthält der eingefügte Text ein Attribut src="…", liest das Tool die Adresse darin und baut die Einbettung daraus neu auf.

Verwandte Checks