Videos einbetten mit <video>

~8 Min. Lesezeit Zuletzt aktualisiert am 8. August 2026

Genauso wie Bilder kannst du auch Videos direkt in deine Webseite einbetten, ohne dass du YouTube oder einen anderen Anbieter brauchst. Dafür gibt es das <video>-Element.

Das <video>-Element

<video src="videos/highlights.mp4" controls></video>

Anders als <img> hat <video> tatsächlich einen schließenden Tag, auch wenn hier kein Inhalt dazwischen steht. Das Attribut controls ist besonders wichtig: es zeigt Play/Pause-Knopf, Lautstärkeregler und eine Fortschrittsleiste an. Ohne controls würde das Video zwar geladen, aber der Besucher hätte keine Möglichkeit, es zu bedienen!

Tipp: controls ist ein Beispiel für ein boolesches Attribut: es braucht keinen Wert, allein die Anwesenheit des Wortes schaltet die Eigenschaft ein. Du schreibst also nicht controls="ja", sondern einfach nur controls.

Mehrere Videoformate anbieten mit source

Nicht jeder Browser unterstützt jedes Videoformat gleich gut. Um auf der sicheren Seite zu sein, kannst du mehrere Formate anbieten und dem Browser die Wahl überlassen, welches er nimmt. Dafür benutzt du <source>-Elemente innerhalb von <video> statt des src-Attributs direkt am Video-Tag:

<video controls>
  <source src="videos/highlights.mp4" type="video/mp4">
  <source src="videos/highlights.webm" type="video/webm">
  Dein Browser unterstützt leider kein Video.
</video>

Der Browser probiert die <source>-Elemente der Reihe nach durch und nimmt das erste Format, das er abspielen kann. Der Text ganz am Ende ("Dein Browser unterstützt leider kein Video") wird nur angezeigt, wenn gar kein Format funktioniert hat - das ist ein sinnvoller Rückfall für sehr alte Browser.

Weitere nützliche Attribute

width und height: genau wie bei Bildern, um die Anzeigegröße zu steuern.
autoplay: startet das Video automatisch, sobald die Seite geladen ist (booleanisches Attribut, ähnlich wie controls).
loop: spielt das Video nach dem Ende automatisch wieder von vorne ab.
muted: startet das Video ohne Ton.

Achtung: Sei mit autoplay sehr vorsichtig! Videos, die automatisch und mit Ton starten, sind für Besucher meistens sehr nervig und werden von vielen Browsern inzwischen sogar automatisch blockiert, wenn kein muted dabei ist. Am besten lässt du controls immer stehen und überlässt es dem Besucher, wann das Video startet.

Ein Highlight-Video einbauen

Füge (falls du eine Videodatei hast) ein Video auf Finns Seite ein:

index.html

<h2 id="video">Highlight-Video</h2>
<video controls width="500">
  <source src="videos/highlights.mp4" type="video/mp4">
  Dein Browser unterstützt leider kein Video.
</video>

Vorheriges Kapitel Bilder mit Beschriftung: <figure> und <figcaption> Nächstes Kapitel Töne einbetten mit <audio>