HTML YouTube-Videos
Manchmal möchten Sie Ihre Videos in andere Formate konvertieren, damit sie in allen Browsern abgespielt werden können. Die Konvertierung von Videos in andere Formate kann jedoch schwierig und zeitaufwändig sein. Ein einfacherer Weg ist es, den YouTube-Player direkt auf Ihrer Webseite mit einem <iframe>-Element einzubetten.
Beim Speichern oder Abspielen eines Videos zeigt YouTube eine ID an, die Sie verwenden können, um im HTML-Code auf das Video zu verweisen.
Abspielen eines YouTube-Videos in HTML
Wenn Sie Ihr Video auf einer Webseite abspielen möchten, gehen Sie wie folgt vor:
- Laden Sie das Video auf YouTube hoch
- Notieren Sie die Video-ID
- Fügen Sie ein
<iframe>-Element auf Ihrer Webseite ein - Legen Sie das
src-Attribut auf die Video-URL fest - Verwenden Sie die
height- undwidth-Attribute, um die Größe des Players festzulegen - Fügen Sie weitere Parameter zur URL hinzu (z. B.
&rel=0, um zu verhindern, dass nach der Wiedergabe empfohlene Videos angezeigt werden)
Beispiel zum Abspielen 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" src="https://www.youtube.com/embed/i8n1gSw_o_8" allow="autoplay; fullscreen"></iframe>
</body>
</html>Autoplay auf YouTube
Sie können auch festlegen, dass Ihr Video automatisch beginnt, wenn die Seite aufgerufen wird. Fügen Sie dazu einen Parameter an Ihre YouTube-URL an.
Wenn der Wert 0 ist (Standard), startet das Video nicht automatisch beim Laden des Players. Wenn der Wert 1 ist, startet das Video automatisch beim Laden des Players.
Hinweis: Moderne Browser erfordern das allow-Attribut im iframe, damit Autoplay und Vollbild korrekt funktionieren.
Beispiel für YouTube Autoplay:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8?autoplay=1" allow="autoplay; fullscreen"></iframe>
</body>
</html>Neben der ursprünglichen URL kann eine durch Kommas getrennte Liste von Videos zum Abspielen angegeben werden (YouTube-Playlist).
YouTube-Steuerungselemente
Wenn der Wert 0 ist, werden die Player-Steuerungselemente nicht angezeigt. Wenn der Wert 1 ist (Standard), werden die Player-Steuerungselemente angezeigt.
Beispiel für YouTube-Steuerungselemente:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8?controls=0" allow="autoplay; fullscreen"></iframe>
</body>
</html>YouTube-Schleife
Wenn der Wert 0 ist (Standard), wird das Video nur einmal abgespielt. Wenn der Wert 1 ist, wird das Video endlos wiederholt.
Beispiel für YouTube-Schleife:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8?playlist=i8n1gSw_o_8&loop=1" allow="autoplay; fullscreen"></iframe>
</body>
</html>YouTube – Verwenden der HTML-Tags <embed> oder <object>
YouTube-<embed>- und <object>-Elemente sind veraltet. Verwenden Sie stattdessen <iframe>.
Beispiel zum Hinzufügen von YouTube-Videos mit dem <embed>-Element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<embed width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8" />
</body>
</html>Beispiel zum Hinzufügen von YouTube-Videos mit dem <object>-Element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<object width="560" height="315" data="https://www.youtube.com/embed/i8n1gSw_o_8"></object>
</body>
</html>Praxis
Welches HTML-Tag wird verwendet, um YouTube-Videos in eine Webseite einzubetten?