Hintergrundvideo auf deiner Website: in Schleife, stumm und schnell
Aktualisiert: 5. November 2026
Ein Video, das im Kopfbereich oder in einem Abschnitt von selbst startet, zieht Aufmerksamkeit auf sich – falsch umgesetzt macht es deine Website aber langsam und verbraucht das mobile Datenvolumen deiner Besucher. Entscheidend ist, einen dekorativen Hintergrund von einem Video zu unterscheiden, das die Leute wirklich ansehen. So setzt du beides um.
Die Regeln der Browser
- Ein Video darf nur von selbst starten, wenn es stumm ist: Chrome, Safari und Firefox blockieren Autoplay mit Ton.
- Auf dem iPhone brauchst du das Attribut playsinline, damit es sich nicht im Vollbild öffnet.
- Hat der Nutzer den Datensparmodus oder Energiesparmodus aktiv, startet der Browser es eventuell nicht automatisch: Füge immer ein Ersatzbild (poster) hinzu.
Option 1: dekorativer Hintergrund (kurzer Clip auf deiner eigenen Website)
Für einen rein dekorativen Hintergrund von wenigen Sekunden ohne Steuerelemente ist eine kleine Datei von deiner Website am leichtesten. Komprimiere sie stark: Ein Clip von 5–10 Sekunden sollte weniger als 2–3 MB haben.
<video autoplay muted loop playsinline preload="metadata" poster="background.jpg" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover">
<source src="background.webm" type="video/webm">
<source src="background.mp4" type="video/mp4">
</video>Option 2: hervorgehobenes Video, das von selbst startet (mit Dembed)
Ist es ein Video, das die Leute ansehen sollen (eine Präsentation, ein Trailer oder eine Demo), hoste es auf Dembed und bette es per iframe ein. Es belastet dein Hosting nicht, die Qualität passt sich der Verbindung an, und Besucher können den Ton einschalten oder in den Vollbildmodus wechseln.
Hänge ?autoplay=1 an die Einbettungsadresse an, damit es stumm von selbst startet. Unter Dashboard → Player kannst du die Schleife aktivieren und den Titel ausblenden, um es aufgeräumter wirken zu lassen.
<iframe src="https://dembed.cc/embed/v_DEINE_ID?autoplay=1" title="Präsentation" style="width:100%;aspect-ratio:16/9;border:0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen loading="lazy"></iframe>Tipps, damit deine Website nicht langsamer wird
- Nutze auf dem Handy kein schweres Video als Hintergrund im Kopfbereich: Zeige das Bild und spiele das Video nur auf großen Bildschirmen ab.
- Verwende loading="lazy" bei iframes unterhalb des ersten Bildschirms.
- Reserviere den Platz mit aspect-ratio, damit die Seite beim Laden nicht springt (bessere Core Web Vitals).
- Biete eine Möglichkeit zum Pausieren: Das ist besser für die Barrierefreiheit und für Menschen mit aktivierter Bewegungsreduzierung.
Häufige Fragen
Fast immer, weil es nicht stumm ist. Füge muted hinzu (und playsinline für das iPhone). Mit Ton blockieren Browser Autoplay.