BESTE WEBSITE FÜR WEBENTWICKLER
HTML5-Lektionen für Anfänger

Ua En Es

HTML YouTube Videos


Der einfachste Weg, Videos in HTML abzuspielen, ist die Verwendung von YouTube.


Haben Sie Probleme mit Videoformaten?

Das Konvertieren von Videos in verschiedene Formate kann schwierig und zeitaufwändig sein.

Eine einfachere Lösung besteht darin, YouTube die Videos auf Ihrer Webseite abspielen zu lassen.


YouTube-Video-ID

YouTube zeigt eine ID (wie tgbNymZ7vqY) an, wenn Sie ein Video speichern (oder abspielen).

Sie können diese ID verwenden und im HTML-Code auf Ihr Video verweisen.


Abspielen eines YouTube-Videos in HTML

Um Ihr Video auf einer Webseite abzuspielen, gehen Sie wie folgt vor:

  • Laden Sie das Video auf YouTube hoch
  • Notieren Sie sich die Video-ID
  • Definieren Sie ein <iframe>-Element in Ihrer Webseite
  • Lassen Sie das Attribut src auf die Video-URL verweisen
  • Verwenden Sie die Attribute width und height, um die Größe des Players anzugeben
  • Fügen Sie der URL weitere Parameter hinzu (siehe unten).

Beispiel

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
Try it Yourself »

YouTube Autoplay + Mute

Sie können die Wiedergabe Ihres Videos automatisch starten lassen, wenn ein Benutzer die Seite besucht, indem Sie autoplay=1 zur YouTube-URL hinzufügen. Allerdings ist das automatische Starten eines Videos für Ihre Besucher nervig!

Hinweis: Chromium-Browser erlauben in den meisten Fällen keine automatische Wiedergabe. Stummgeschaltetes Autoplay ist jedoch immer erlaubt.

Fügen Sie mute=1 nach autoplay=1 hinzu, damit Ihr Video automatisch abgespielt wird (jedoch stummgeschaltet).

YouTube - Autoplay + Muted

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>
Try it Yourself »

YouTube Playlist (Wiedergabeliste)

Eine durch Kommas getrennte Liste der abzuspielenden Videos (zusätzlich zur Original-URL).


YouTube Loop

Fügen Sie loop=1 hinzu, damit Ihr Video für immer in einer Schleife läuft.

Wert 0 (Standard): Das Video wird nur einmal abgespielt.

Wert 1: Das Video wird in einer Endlosschleife wiederholt.

YouTube — Loop

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
Try it Yourself »

YouTube Controls

Fügen Sie controls=0 hinzu, um keine Steuerelemente im Videoplayer anzuzeigen.

Wert 0: Player-Steuerelemente werden nicht angezeigt.

Wert 1 (Standard): Der Spieler steuert die Anzeige.

YouTube — Controls

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>
Try it Yourself »


Kommentare