HTML -Tutorial

HTML-HOME HTML-Einführung HTML-Editoren HTML-Basis HTML-Elemente HTML-Attribute HTML-Überschriften HTML-Absätze HTML-Stile HTML-Formatierung HTML-Zitate HTML-Kommentare HTML-Farben HTML-CSS HTML-Links HTML-Bilder HTML-Favicon HTML-Tabellen HTML-Listen HTML-Block und Inline HTML-Klassen HTML-ID HTML-Iframes HTML-JavaScript HTML-Dateipfade HTML-Kopf HTML-Layout HTML-responsiv HTML Computercode HTML-Semantik HTML-Styleguide HTML-Entitäten HTML-Symbole HTML-Emojis HTML-Zeichensatz HTML-URL-Codierung HTML vs. XHTML

HTML -Formulare

HTML-Formulare HTML-Formularattribute HTML-Formularelemente HTML-Eingabetypen HTML-Eingabeattribute HTML-Eingabeformularattribute

HTML -Grafiken

HTML-Leinwand HTML-SVG

HTML- Medien

HTML-Medien HTML-Video HTML-Audio HTML-Plugins HTML-YouTube

HTML -APIs

HTML-Geolokalisierung HTML-Drag/Drop HTML-Webspeicher HTML-Webworker HTML-SSE

HTML- Beispiele

HTML-Beispiele HTML-Quiz HTML-Übungen HTML-Zertifikat HTML-Zusammenfassung HTML-Barrierefreiheit

HTML -Referenzen

HTML-Tag-Liste HTML-Attribute Globale HTML-Attribute HTML-Browser-Unterstützung HTML-Ereignisse HTML-Farben HTML-Leinwand HTML-Audio/Video HTML-Doctypes HTML-Zeichensätze HTML-URL-Codierung HTML-Sprachcodes HTTP-Nachrichten HTTP-Methoden PX-zu-EM-Konverter Tastatürkürzel

HTML -YouTube-Videos


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


Kämpfen Sie mit Videoformaten?

Das Konvertieren von Videos in andere 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

Gehen Sie wie folgt vor, um Ihr Video auf einer Webseite abzuspielen:

  • Laden Sie das Video auf YouTube hoch
  • Notieren Sie sich die Video-ID
  • Definieren Sie ein <iframe>Element in Ihrer Webseite
  • Lassen Sie das srcAttribut auf die Video-URL verweisen
  • Verwenden Sie die Attribute widthund height, um die Abmessungen des Players anzugeben
  • Fügen Sie der URL beliebige andere Parameter hinzu (siehe unten).

Beispiel

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

YouTube Autoplay + Stumm

Sie können Ihr Video automatisch abspielen lassen, wenn ein Benutzer die Seite besucht, indem Sie autoplay=1es der YouTube-URL hinzufügen. Das automatische Starten eines Videos ist jedoch für Ihre Besucher ärgerlich!

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

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

YouTube - Automatische Wiedergabe + stummgeschaltet

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


YouTube-Playlist

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


YouTube-Schleife

Fügen Sie hinzu loop=1, um Ihr Video für immer wiederholen zu lassen.

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

Wert 1: Das Video wird (für immer) wiederholt.

YouTube-Schleife

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

YouTube-Steuerelemente

Hinzufügen controls=0, um Steuerelemente im Videoplayer nicht anzuzeigen.

Wert 0: Player-Steuerung wird nicht angezeigt.

Wert 1 (Standard): Anzeige der Spielersteuerung.

YouTube - Steuerelemente

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