Videos gehören heute zu den wichtigsten Inhalten moderner Websites. Ob Produktpräsentationen, Tutorials, Imagefilme oder Schulungsvideos, mit HTML5 lassen sich Videos direkt im Browser wiedergeben, ohne dass zusätzliche Plugins wie Adobe Flash erforderlich sind. In diesem Blogartikel erfährst du, wie du Videos mit dem HTML-Element <video> einbindest, welche Attribute wichtig sind und wie du mehrere Videoformate für maximale Browserkompatibilität bereitstellst.
Was ist das Video-Element?
Das HTML5-Element <video> dient dazu, Videodateien direkt auf einer Website einzubinden. Moderne Browser unterstützen die Wiedergabe von Videos nativ, sodass Besucher keine zusätzliche Software installieren müssen.
Die Grundstruktur sieht folgendermaßen aus:
<video src="video.mp4"></video>In dieser Form wird das Video zwar eingebunden, der Besucher kann es jedoch noch nicht steuern. Deshalb kommen meist weitere Attribute zum Einsatz.
Wer Webdesign lernen möchte, sollte auf gute Fachbücher setzen. Gerade beim Einstieg in HTML, CSS, WordPress oder responsives Webdesign helfen verständliche Schritt-für-Schritt-Anleitungen und praktische Beispiele enorm weiter. Hochwertige Bücher findest du bei Amazon*.
Ein Video mit Steuerelementen anzeigen
In den meisten Fällen sollen Besucher das Video starten, pausieren oder die Lautstärke anpassen können. Dafür wird das Attribut controls verwendet.
<video src="video.mp4" controls></video>Dadurch blendet der Browser automatisch eine Steuerleiste ein.
Breite und Höhe festlegen
Mit den Attributen width und height kannst du die Größe des Videos bestimmen.
<video src="video.mp4" controls width="800" height="450"></video>In modernen Webprojekten wird die Größe häufig über CSS gesteuert.
video {
width: 100%;
height: auto;
}Dadurch passt sich das Video flexibel an verschiedene Bildschirmgrößen an.
Wir üben das gleich und erstellen ein HTML-Grundgerüst in einem Editor. Dann fügen wir den bereits gezeigten Code ein, speichern die HTML-Datei als index.html ab und stellen ein Video im MP4-Format bereit, der sich im selben Ordner wie das HTML-Dokument befindet.
Der Code sieht so aus:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testseite</title>
</head>
<body>
<h1>Mein erstes Video</h1>
<p>
<video src="video.mp4" controls width="800" height="450"></video>
</p>
</body>
</html>Und so sieht die Ausgabe im Browser aus:
Mehrere Videoformate bereitstellen
Nicht jeder Browser unterstützt jedes Videoformat. Daher empfiehlt es sich, mehrere Formate anzubieten.
<video controls width="800">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Ihr Browser unterstützt dieses Video nicht.
</video>Der Browser verwendet automatisch das erste unterstützte Format.
Das Video automatisch starten
Mit dem Attribut autoplay startet die Wiedergabe unmittelbar nach dem Laden der Seite.
<video src="video.mp4" autoplay></video>Allerdings blockieren viele Browser heutzutage automatisch startende Videos mit Ton. Deshalb wird häufig zusätzlich muted verwendet.
<video src="video.mp4" autoplay muted></video>Video stummschalten
Soll ein Video ohne Ton abgespielt werden, kann das Attribut muted eingesetzt werden.
<video src="video.mp4" controls muted></video>Dies wird häufig bei Hintergrundvideos verwendet.
Video in Endlosschleife abspielen
Mit dem Attribut loop beginnt das Video nach dem Ende automatisch erneut.
<video src="video.mp4" controls loop></video>Diese Funktion eignet sich beispielsweise für Produktanimationen oder Hintergrundvideos.
Vorschaubild festlegen
Bevor ein Video gestartet wird, kann ein individuelles Vorschaubild angezeigt werden.
<video controls poster="vorschaubild.jpg">
<source src="video.mp4" type="video/mp4">
</video>Das Bild erscheint, solange das Video noch nicht abgespielt wurde.
Wer Webdesign lernen möchte, sollte auf gute Fachbücher setzen. Gerade beim Einstieg in HTML, CSS, WordPress oder responsives Webdesign helfen verständliche Schritt-für-Schritt-Anleitungen und praktische Beispiele enorm weiter. Hochwertige Bücher findest du bei Amazon*.
Video vorladen
Mit dem Attribut preload bestimmst du, ob der Browser Videodaten bereits beim Seitenaufruf laden soll.
<video controls preload="metadata">
<source src="video.mp4" type="video/mp4">
</video>Mögliche Werte sind:
none– nichts vorladenmetadata– nur Metadaten ladenauto– möglichst viele Daten vorladen
Responsives Video mit HTML und CSS
Für moderne Websites sollte ein Video auf Smartphones, Tablets und Desktop-PCs gleichermaßen funktionieren.
HTML:
<video controls>
<source src="video.mp4" type="video/mp4">
</video>CSS:
video {
width: 100%;
max-width: 1200px;
height: auto;
}Dadurch passt sich das Video automatisch an die verfügbare Breite an.
Häufige Videoformate
Die wichtigsten Videoformate für das Web sind:
| MP4 | Standardformat mit sehr hoher Browserunterstützung |
| WebM | Modernes, effizientes Open-Source-Format |
| Ogg | Freies Format, heute nur noch selten verwendet |
Für die meisten Websites reicht heutzutage eine MP4-Datei aus.
Video in HTML einbinden – Fazit
Mit dem HTML5-Element <video> lassen sich Videos einfach und ohne zusätzliche Plugins direkt in Webseiten integrieren. Durch Attribute wie controls, autoplay, muted, loop und poster kann das Verhalten flexibel angepasst werden. Für maximale Kompatibilität empfiehlt es sich, mehrere Videoformate bereitzustellen und Videos mithilfe von CSS responsiv zu gestalten. So funktionieren Videoinhalte auf Desktop-PCs, Tablets und Smartphones gleichermaßen zuverlässig.
Wer Webdesign lernen möchte, sollte auf gute Fachbücher setzen. Gerade beim Einstieg in HTML, CSS, WordPress oder responsives Webdesign helfen verständliche Schritt-für-Schritt-Anleitungen und praktische Beispiele enorm weiter. Hochwertige Bücher findest du bei Amazon*.
![Wie binde ich CSS in HTML ein? [2026 Guide für Webdesigner]](https://www.webnumerus.de/wp-content/uploads/2026/04/Wie_binde_ich_CSS_in_HTML_ein-300x200.jpg "Wie binde ich CSS in HTML ein? [2026 Guide für Webdesigner]")
Schreiben Sie einen Kommentar