Ein YouTube-Video einbetten klingt einfach: Link kopieren, etwas Code einfügen, fertig. Doch es gibt einen echten Unterschied zwischen einem Embed, das einfach nur funktioniert, und einem, das schnell, responsiv, datenschutzfreundlich und auf jedem Gerät korrekt dimensioniert ist. Diese Anleitung deckt alles davon an einer Stelle ab.
Was Einbetten eigentlich bedeutet
Ein Video einzubetten bedeutet, es direkt auf der eigenen Webseite über ein <iframe> anzuzeigen, statt nur zu YouTube zu verlinken. YouTube erzeugt für jedes Video eine spezielle Embed-URL (in der Form youtube.com/embed/VIDEO_ID), und genau diese URL kommt in das src-Attribut des Iframes. Die sichtbare YouTube.com-Seite selbst, mit Kommentaren und Empfehlungen, lässt sich auf diese Weise nicht einbetten; dafür ist ausschließlich die dedizierte Embed-URL gebaut.
Der Aufbau eines Embed-Codes
Ein einfaches Embed sieht so aus:
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allowfullscreen></iframe>Jeder Teil ist wichtig. Width und height legen eine feste Pixelgröße fest, die zwar funktioniert, sich aber nicht an unterschiedliche Bildschirmgrößen anpasst. Die src-URL bestimmt, welches Video abgespielt wird und welche Domain dafür zuständig ist (ein Detail, das für den Datenschutz relevant ist, dazu weiter unten mehr). Das title-Attribut ist keine Dekoration: Screenreader lesen es vor, weshalb ein fehlender oder generischer Titel eine echte Barrierefreiheitslücke darstellt. allowfullscreen erlaubt es Besuchern, den Player zu vergrößern, was die meisten bei jedem eingebetteten Video erwarten.
Responsiv machen
Feste Pixelmaße sehen auf dem Bildschirm, auf dem sie getestet wurden, gut aus und brechen auf jedem anderen. Ein responsives Embed umschließt das Iframe stattdessen mit einem Container, der bei jeder Breite das richtige Seitenverhältnis beibehält:
<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">
<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe>
</div>Der Wert 56,25 % ist einfach das Höhe-zu-Breite-Verhältnis eines 16:9-Videos, ausgedrückt als Prozentsatz (9 geteilt durch 16 = 0,5625). Für ein vertikales Short-Video im Format 9:16 liegt der entsprechende Wert bei 177,78 % (16 geteilt durch 9). Dieser Padding-Bottom-Trick funktioniert seit über einem Jahrzehnt zuverlässig in allen Browsern, weshalb er weiterhin die gängigste Methode ist, auch wenn die moderne CSS-Eigenschaft aspect-ratio in Browsern, die sie unterstützen, eine einfachere Alternative darstellt.
Datenschutz: youtube.com vs. youtube-nocookie.com
YouTube bietet zwei Domains zum Einbetten an. Die Standarddomain youtube.com verhält sich wie der Rest von YouTube und kann bereits beim Laden der Seite Tracking-Cookies setzen. Die Domain youtube-nocookie.com ist funktional identisch, setzt diese Cookies aber erst, wenn ein Besucher tatsächlich mit dem Player interagiert, weshalb sie für datenschutzbewusste Websites die empfohlene Standardeinstellung ist. Der Wechsel ist so einfach wie das Ändern der Domain in der Embed-URL; alles andere am Embed bleibt gleich.
Wiedergabe steuern
Die Embed-URL akzeptiert eine Reihe von Query-Parametern, die das Verhalten des Players verändern:
- start und end (in Sekunden) grenzen die Wiedergabe auf einen bestimmten Bereich ein.
- autoplay=1 startet das Video sofort, wobei die meisten Browser zusätzlich mute=1 verlangen, sonst wird Autoplay blockiert.
- loop=1, kombiniert mit einem passenden playlist-Parameter, der auf dieselbe Video-ID gesetzt ist, spielt das Video endlos.
- controls=0 blendet die Steuerleiste des Players aus, nützlich für Video im Hintergrundstil.
- rel=0 begrenzt die vorgeschlagenen Videos am Ende der Wiedergabe auf Videos desselben Kanals.
Die vollständige Liste mit Beispielen findest du in unserer Referenz zu den Iframe-Parametern.
Performance: Lass Embeds deine Seite nicht ausbremsen
Ein YouTube-Iframe ist ein relativ schweres Element beim Laden: Es lädt die eigenen Skripte des Players und ein Vorschaubild, noch bevor jemand auf Play drückt. Auf einer Seite mit mehreren Embeds kann das gleichzeitige Laden aller den anfänglichen Seitenaufbau spürbar verlangsamen. Zwei Maßnahmen lösen das gut. Erstens: das native Attribut loading="lazy" zum Iframe hinzufügen, damit Browser das Laden verzögern, bis es sich dem sichtbaren Bereich nähert. Zweitens: bei Seiten mit vielen Videos ein Klick-zum-Laden-Muster in Betracht ziehen, bei dem zunächst nur ein leichtes Vorschaubild angezeigt wird und das echte Iframe erst eingefügt wird, wenn ein Besucher darauf klickt.
Sonderformate: Shorts und Playlists
Shorts werden technisch genauso eingebettet wie normale Videos, benötigen aber statt 16:9 einen responsiven 9:16-Wrapper, um schwarze Balken um das vertikale Bild zu vermeiden. Playlists nutzen einen völlig anderen Embed-Pfad, /embed/videoseries, kombiniert mit einem list-Parameter, der auf die ID der Playlist gesetzt ist, und zeigen Weiter-/Zurück-Steuerelemente, mit denen man sich durch alle Videos der Playlist bewegt.
Wohin mit dem Code
Sobald der Embed-Code fertig ist, muss er dorthin, wo das HTML deiner Website direkt bearbeitbar ist: ein Custom-HTML-Block im WordPress-Block-Editor, ein Rich-Text- oder benutzerdefinierter Liquid-Abschnitt in Shopify, ein Embed-Widget in Wix, oder direkt in das Markup einer handcodierten Website. Die genauen Schritte für die gängigsten Plattformen findest du in eigenen Anleitungen für WordPress, Shopify und Wix.
Ohne eine Zeile Code erstellen
All das oben Genannte (responsiver Wrapper, datenschutzfreundliche Domain, Start- und Endzeiten, Autoplay, Loop, ausgeblendete Steuerelemente, Shorts-Größe und Playlist-Modus) übernimmt automatisch unser kostenloser Embed-Code-Generator. Link einfügen, gewünschte Optionen aktivieren und den fertigen Code kopieren. Er läuft vollständig im Browser, sodass nichts über das eingebettete Video an unsere Server gesendet oder dort gespeichert wird.
Häufige Fehler, die es zu vermeiden gilt
- Die Watch-URL (youtube.com/watch?v=…) direkt in das src eines Iframes einfügen, statt sie vorher in das /embed/-Format umzuwandeln.
- autoplay=1 ohne mute=1 setzen, was die meisten Browser einfach ignorieren.
- Ein aussagekräftiges title-Attribut vergessen, was der Barrierefreiheit schadet.
- Feste Breite und Höhe auf einer Seite verwenden, die auch mobil gut funktionieren muss.
- Viele Embeds gleichzeitig auf einer Seite laden, ohne Lazy Loading, was die Ladegeschwindigkeit drückt.
Mit diesen Grundlagen hast du alles, um YouTube-Videos korrekt einzubetten: schnell, responsiv, barrierefrei und datenschutzbewusst, egal ob du den Code von Hand baust oder ihn mit wenigen Klicks generierst.