HTML YouTube-Videos
YouTube-Videos mit dem <iframe>-Element einbetten: Embed-URL, responsive Größe, allow-Attribut, Autoplay, Loop und Datenschutzmodus.
Videos selbst zu hosten und auszuliefern ist aufwändig: Sie müssen mehrere Formate kodieren, damit jeder Browser sie abspielen kann, große Dateien speichern und die Bandbreitenkosten tragen. Der einfachere Weg ist, YouTube all das übernehmen zu lassen und dessen Player mit einem <iframe>-Element in Ihre Seite einzubetten. Der Browser lädt YouTubes Player innerhalb des Frames, sodass Ihnen ein paar Zeilen HTML adaptives Streaming, Untertitel und Vollbild kostenlos bieten.
Diese Seite erklärt, wie Sie die Embed-URL aufbauen, den Player responsiv gestalten, Berechtigungen mit dem allow-Attribut konfigurieren und Wiedergabeparameter wie Autoplay, Loop und Steuerungsleiste übergeben.
Die Video-ID und die Embed-URL finden
Der häufigste Fehler ist, die Watch-URL in src einzutragen. Die Adresse, die Sie im Browser sehen, wenn Sie ein Video auf YouTube ansehen, ist eine Watch-URL und kann nicht direkt eingebettet werden:
https://www.youtube.com/watch?v=i8n1gSw_o_8Der Teil nach v= ist die Video-ID (oben i8n1gSw_o_8). Zum Einbetten benötigen Sie die Embed-URL, die den Pfad /embed/ gefolgt von dieser ID verwendet:
https://www.youtube.com/embed/i8n1gSw_o_8So finden Sie die ID: Öffnen Sie das Video auf YouTube, kopieren Sie den Wert des v-Query-Parameters aus der Adressleiste (oder nutzen Sie die Option Teilen → Einbetten, die Ihnen die vollständige /embed/-URL und das <iframe>-Markup liefert). Verkürzte Freigabelinks wie https://youtu.be/i8n1gSw_o_8 enthalten die ID ebenfalls als letztes Pfadsegment.
Ein YouTube-Video in HTML abspielen
Um ein Video einzubetten, setzen Sie das src-Attribut des Iframes auf die Embed-URL und legen Sie dessen Abmessungen fest:
- Notieren Sie die Video-ID (siehe oben).
- Fügen Sie ein
<iframe>-Element in Ihre Seite ein. - Setzen Sie das
src-Attribut auf die Embed-URL:https://www.youtube.com/embed/VIDEO_ID. - Legen Sie
widthundheightfest (oder passen Sie die Größe per CSS an — siehe Responsive Einbettungen). - Fügen Sie ein
title-Attribut hinzu, das das Video für die Barrierefreiheit beschreibt. - Hängen Sie URL-Parameter an, um die Wiedergabe anzupassen (z. B.
?rel=0, um nach der Wiedergabe empfohlene Videos auf denselben Kanal zu beschränken).
Beispiel für die Einbettung eines YouTube-Videos in HTML mit dem <iframe>-Element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" title="YouTube video player" src="https://www.youtube.com/embed/i8n1gSw_o_8" allow="autoplay; fullscreen"></iframe>
</body>
</html>Datenschutzmodus (youtube-nocookie.com)
Eine standardmäßige YouTube-Einbettung kann Tracking-Cookies setzen, sobald die Seite geladen wird — noch bevor der Besucher auf Play drückt. Unter der DSGVO und ähnlichen Vorschriften kann das eine ausdrückliche Zustimmung erfordern. YouTube bietet einen Datenschutzmodus an, der das Speichern personenbezogener Cookies verzögert, bis der Besucher tatsächlich mit dem Ansehen beginnt. Um ihn zu verwenden, ersetzen Sie den Host durch youtube-nocookie.com:
<iframe width="560" height="315" title="YouTube video player"
src="https://www.youtube-nocookie.com/embed/i8n1gSw_o_8"
allow="autoplay; fullscreen"></iframe>Alles andere — der Pfad /embed/, die Video-ID und alle URL-Parameter — funktioniert genauso. Beachten Sie, dass dies die vom Player möglicherweise gesendeten Daten reduziert, aber nicht vollständig verhindert. Überprüfen Sie daher Ihre Einwilligungsrichtlinie, wenn Sie strenge Anforderungen haben.
Das allow-Attribut
Browser sichern leistungsstarke Funktionen hinter der Permissions Policy ab. Damit ein YouTube-Iframe Autoplay, Vollbild und andere Funktionen nutzen kann, muss die übergeordnete Seite diese über das allow-Attribut des Iframes gewähren. Das Attribut nimmt eine durch Semikolon getrennte Liste von Berechtigungs-Tokens entgegen. Der Satz, den YouTubes eigenes Dialogfeld Teilen → Einbetten erzeugt, lautet:
<iframe width="560" height="315" title="YouTube video player"
src="https://www.youtube.com/embed/i8n1gSw_o_8"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>Häufige Tokens und ihre Funktion:
| Token | Zweck |
|---|---|
accelerometer | Ermöglicht dem Player, Gerätebewegungen zu lesen (wird von einigen 360°/VR-Videos verwendet). |
autoplay | Erlaubt dem Video, ohne Nutzeraktion zu starten. |
clipboard-write | Ermöglicht dem Player, Text (z. B. Freigabelinks) in die Zwischenablage zu kopieren. |
encrypted-media | Aktiviert die DRM-geschützte Wiedergabe über Encrypted Media Extensions. |
gyroscope | Ermöglicht dem Player, die Geräteausrichtung zu lesen (360°/VR-Videos). |
picture-in-picture | Erlaubt dem Video, in ein schwebendes Fenster auszulagern. |
web-share | Ermöglicht dem Player, den nativen Teilen-Dialog zu öffnen. |
Das separate Attribut allowfullscreen erlaubt die Vollbild-Schaltfläche. Tokens, die Sie nicht benötigen, können Sie weglassen; das Weglassen von autoplay bedeutet beispielsweise, dass Autoplay blockiert wird.
Responsive YouTube-Einbettungen
Ein Iframe mit festen Werten für width/height passt sich nicht an kleine Bildschirme an und kann seinen Container überlaufen. Zwei zuverlässige Techniken lassen den Player auf die Breite seines Elternelements skalieren und dabei das 16:9-Videoverhältnis beibehalten.
Mit der CSS-Eigenschaft aspect-ratio (moderne Browser)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.video {
width: 100%;
max-width: 720px;
}
.video iframe {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border: 0;
}
</style>
</head>
<body>
<div class="video">
<iframe title="YouTube video player"
src="https://www.youtube.com/embed/i8n1gSw_o_8"
allow="autoplay; fullscreen"></iframe>
</div>
</body>
</html>Mit dem padding-bottom-Hack (breite Unterstützung)
Für ältere Browser ohne aspect-ratio umschließen Sie den Iframe mit einem Container, dessen Höhe durch padding-bottom: 56.25% (das entspricht 9 ÷ 16, dem 16:9-Verhältnis) erzeugt wird, und dehnen den Iframe dann absolut auf die gesamte Fläche aus:
<style>
.video-wrap {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
}
.video-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
<div class="video-wrap">
<iframe title="YouTube video player"
src="https://www.youtube.com/embed/i8n1gSw_o_8"
allow="autoplay; fullscreen"></iframe>
</div>Wiedergabe mit URL-Parametern anpassen
Sie konfigurieren den Player, indem Sie Query-Parameter an die Embed-URL anhängen. Der erste Parameter wird mit einem ? eingeleitet, und jeder weitere Parameter wird mit & verbunden:
https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1&controls=0Die meisten Parameter nehmen den Wert 0 (aus) oder 1 (ein) an. Die folgenden Abschnitte behandeln die am häufigsten verwendeten.
YouTube Autoplay
Um das Video automatisch zu starten, wenn der Player geladen wird, fügen Sie autoplay=1 hinzu (der Standardwert, autoplay=0, wartet, bis der Nutzer auf Play drückt).
Wichtig: Browser blockieren Autoplay mit Ton. Ein automatisch abgespieltes Video muss daher auch stumm geschaltet sein. Kombinieren Sie autoplay=1 mit mute=1 — andernfalls startet das Video nicht. Der Iframe muss außerdem die autoplay-Berechtigung in seinem allow-Attribut erhalten haben.
Beispiel für YouTube Autoplay:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" title="YouTube video player" src="https://www.youtube.com/embed/i8n1gSw_o_8?autoplay=1&mute=1" allow="autoplay; fullscreen"></iframe>
</body>
</html>YouTube-Steuerungsleiste
Der Parameter controls blendet die Steuerungsleiste des Players (Play/Pause, Lautstärke, Vollbild usw.) ein oder aus. Verwenden Sie controls=0, um sie auszublenden, und controls=1 (Standardwert), um sie anzuzeigen.
Beispiel für die YouTube-Steuerungsleiste:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" title="YouTube video player" src="https://www.youtube.com/embed/i8n1gSw_o_8?controls=0" allow="autoplay; fullscreen"></iframe>
</body>
</html>YouTube-Loop
Verwenden Sie loop=1, damit das Video endlos wiederholt wird (der Standardwert, loop=0, spielt es einmal ab). Es gibt einen Haken: Bei einem einzelnen Video funktioniert das Looping nur, wenn Sie auch playlist mit derselben Video-ID übergeben. YouTube behandelt einen Loop als „zurück zum Anfang der Playlist gehen", sodass das Video ohne diesen Playlist-Eintrag nach einer Wiedergabe stoppt. Das folgende Beispiel setzt beides:
Beispiel für YouTube-Loop:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" title="YouTube video player" src="https://www.youtube.com/embed/i8n1gSw_o_8?playlist=i8n1gSw_o_8&loop=1" allow="autoplay; fullscreen"></iframe>
</body>
</html>Veraltet: die Tags <embed> und <object>
In älteren Tutorials kann man noch sehen, wie YouTube mit den Elementen <embed> oder <object> eingebettet wird. Verwenden Sie diese nicht für YouTube — die moderne, unterstützte Methode ist das oben gezeigte <iframe>. Die folgenden Beispiele werden nur aufgeführt, damit Sie das veraltete Muster erkennen können:
<!-- Legacy / not recommended -->
<embed width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8" />
<object width="560" height="315" data="https://www.youtube.com/embed/i8n1gSw_o_8"></object>Verwandte Themen
- HTML
<iframe>-Tag — das Element, das für jede YouTube-Einbettung verwendet wird. - HTML
<video>-Tag — zum Bereitstellen eigener Videodateien statt der Einbettung von YouTube. - Audio und Video in HTML5 — das umfassendere Bild nativer Medien in HTML.