<video>

Das <video>-Element bettet ein Video direkt in deine Webseite ein: ohne Flash, ohne externe Plugins, rein mit HTML. Bevor es <video> gab (vor HTML5), brauchtest du Flash Player oder andere Plugins, um Videos im Browser abzuspielen. Heute reicht ein einziges HTML-Tag. Auf dieser Seite lernst du, wie du Videos einbindest, welche Formate funktionieren und warum Autoplay nicht immer das macht, was du erwartest.

Steckbrief <video>

Kategorie: Links & Medien
Art: Block
Attribute: 10
Beispiele: 3
Browser: 5 von 5
E-Mail: 1 von 5
Stand: 03.02.2026

Grundlagen

<video> ist wie ein eingebauter Videoplayer in deiner Webseite. Du gibst ihm eine Videodatei, und der Browser zeigt den Player mit Steuerungselementen an: Play, Pause, Lautstärke, Vollbild. Ohne das controls-Attribut sieht der Nutzer nur ein schwarzes Rechteck (oder das Poster-Bild) und kann das Video nicht abspielen.

<video> ist ein Block-Element und nimmt standardmäßig die Breite seines Containers ein
Das controls-Attribut zeigt die Steuerungselemente (Play, Pause, Lautstärke, Fortschritt, Vollbild)
Videos können über src direkt oder über <source>-Kindelemente mit Format-Fallbacks eingebunden werden
Das poster-Attribut zeigt ein Vorschaubild, bevor das Video geladen oder abgespielt wird
Autoplay funktioniert nur mit muted: Browser blockieren automatisches Abspielen mit Ton, um Nutzer nicht zu belästigen
Inhalt zwischen <video> und </video> wird als Fallback angezeigt, wenn der Browser das Element nicht unterstützt

Syntax

<video controls width="400">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  Dein Browser unterstützt das Video-Element nicht.
</video>

Attribute

10 Attribute

Attribut und Beispiel	Beschreibung
`src` URL src="video.mp4"	Pfad zur Videodatei. Alternativ können source-Elemente für mehrere Formate verwendet werden.
`controls` Boolean controls	Zeigt Steuerungselemente an (Play, Pause, Lautstärke, Fortschritt, Vollbild).
`autoplay` Boolean autoplay	Startet das Video automatisch. Funktioniert in den meisten Browsern nur zusammen mit muted.
`muted` Boolean muted	Schaltet den Ton stumm. Erforderlich, damit autoplay in modernen Browsern funktioniert.
`loop` Boolean loop	Wiederholt das Video endlos nach dem Ende.
`poster` URL poster="vorschau.jpg"	Vorschaubild, das angezeigt wird, bevor das Video geladen oder abgespielt wird.
`width` Number width="640"	Breite des Videos in Pixeln.
`height` Number height="360"	Höhe des Videos in Pixeln.
`preload` String preload="metadata"	Gibt an, wie viel vorab geladen werden soll: none, metadata oder auto.
`playsinline` Boolean playsinline	Spielt das Video inline statt im Vollbild ab (wichtig für iOS Safari).

Beispiele

3 Beispiele

Das poster-Attribut zeigt ein Vorschaubild, solange das Video nicht gestartet wurde. Das ist wichtig für die visuelle Gestaltung der Seite. Ohne Poster sieht der Nutzer entweder ein schwarzes Rechteck oder den ersten Frame:

<video controls poster="vorschau.jpg" width="400">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  Dein Browser unterstützt kein Video.
</video>

Hintergrundvideos auf Landing Pages sind beliebt. Damit Autoplay funktioniert, muss das Video stummgeschaltet sein, denn Browser blockieren automatisches Abspielen mit Ton. Dazu playsinline für iOS:

<video autoplay muted loop playsinline
       style="width: 100%; object-fit: cover;">
  <source src="background.webm" type="video/webm">
  <source src="background.mp4" type="video/mp4">
</video>

Mit preload steuerst du, wie viel der Browser vorab lädt. Das ist wichtig für die Performance, besonders bei Seiten mit vielen Videos:

<!-- Nichts vorab laden (spart Bandbreite) -->
<video controls preload="none" poster="vorschau.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

<!-- Nur Metadaten laden (Dauer, Abmessungen) -->
<video controls preload="metadata">
  <source src="video.mp4" type="video/mp4">
</video>

Barrierefreiheit

4 Punkte

controls immer angeben: Ohne controls können Nutzer das Video nicht steuern: weder starten, noch pausieren, noch die Lautstärke ändern. Hintergrundvideos ohne Controls sollten rein dekorativ sein und keine wichtigen Informationen enthalten.
Untertitel mit <track> bereitstellen: Gehörlose und schwerhörige Nutzer brauchen Untertitel. Verwende <track kind="subtitles"> für Untertitel oder <track kind="captions"> für eine vollständige Audiobeschreibung (inkl. Geräusche).
Autoplay vermeiden oder stummschalten: Automatisch abspielende Videos mit Ton sind störend und können für Menschen mit Angststörungen belastend sein. Wenn Autoplay nötig ist, verwende immer muted.
Poster-Bild bereitstellen: Ein aussagekräftiges Poster-Bild gibt Nutzern vor dem Abspielen einen Hinweis auf den Videoinhalt.

Häufige Fehler

4 Fehler

01 Autoplay ohne muted

Das ist der häufigste Fehler. Moderne Browser blockieren Autoplay mit Ton konsequent: Das Video startet einfach nicht, und es gibt keine Fehlermeldung. Wenn du autoplay brauchst, füge immer muted hinzu.

02 Fehlende controls

Ohne das controls-Attribut sieht der Nutzer nur ein statisches Bild (oder ein schwarzes Rechteck) und hat keine Möglichkeit, das Video zu starten. Vergiss controls nur bei bewusst dekorativen Hintergrundvideos mit autoplay muted loop.

03 Kein Fallback-Content

Obwohl heute praktisch alle Browser <video> unterstützen, ist es gute Praxis, zwischen den Tags einen Fallback-Text oder einen Download-Link zu platzieren. Der Text wird nur angezeigt, wenn der Browser das Element nicht versteht.

04 Nur ein Videoformat

Verschiedene Browser unterstützen verschiedene Codecs. Biete mindestens MP4 (H.264) an: Das wird universell unterstützt. WebM (VP9) als zusätzliches Format verbessert die Kompression.

Browser-Kompatibilität

5 von 5

Das video-Element wird von allen modernen Browsern vollständig unterstützt. MP4 (H.264) funktioniert überall, WebM (VP9) in Chrome, Firefox, Edge und Opera.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

1 von 5

Video-Unterstützung in Email-Clients ist sehr eingeschränkt. Die meisten Clients blockieren eingebettete Videos aus Sicherheitsgründen.

Apple Mail

Komplett

Apple Mail ist einer der wenigen Clients, die eingebettete Videos abspielen können.
Gmail

Keine

Gmail entfernt video-Elemente komplett. Verwende ein verlinktes Vorschaubild statt eingebettetem Video.
Outlook

Keine

Outlook entfernt video-Elemente. Zeige stattdessen das Poster-Bild mit einem Link zum Video.
Thunderbird

Teilweise

Thunderbird zeigt das Video an, Autoplay funktioniert aber nicht zuverlässig.
Yahoo Mail

Keine

Yahoo Mail entfernt video-Elemente aus dem HTML.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da