Ein Video auf der Website hilft, wenn es eine Aufgabe hat und die Seite nicht ausbremst. Für das Hero-Video heißt das: stumm, kurz, als Schleife, klein komprimiert, mit einem guten Standbild als erstem Bild, einem sichtbaren Pause-Knopf und ohne Bewegung für alle, die am Gerät reduzierte Bewegung eingestellt haben. Filme mit Ton gehören weiter nach unten, mit Untertiteln und Bedienelementen.
Das Hero-Video ist meistens die schwerste Datei der ganzen Website und gleichzeitig die erste, die ein Besucher sieht. Läuft es gut, wirkt die Seite lebendig. Läuft es schlecht, sieht der Besucher erst einen grauen Kasten, dann ein Ruckeln und auf dem Handy im Zug manchmal gar nichts. Die gute Nachricht: Fast alles, was dabei schiefgeht, ist Handwerk und lässt sich vorher einstellen.
der Websites enthalten auf dem Handy überhaupt ein Video-Element.
der Video-Elemente haben ein festgelegtes Vorschaubild.
oder weniger gilt als guter Wert für den Largest Contentful Paint.
Video ist also seltener, als es sich anfühlt, und wird oft ohne Vorschaubild eingebaut. Genau das rächt sich. Der Largest Contentful Paint (LCP) misst, wann der größte sichtbare Inhalt einer Seite steht, und ist eine der Kennzahlen, die Google zur Bewertung der Ladezeit heranzieht. Bei Videos zählt dafür das Vorschaubild oder das erste Bild des Videos, je nachdem, was früher da ist. Fehlt das Vorschaubild, wartet die Messung auf das Video.
Quellen: HTTP Archive, Web Almanac 2024, Kapitel Media · web.dev, Largest Contentful Paint.
Wann Video der Website schadet
Bevor es um Technik geht, die ehrliche Frage: Braucht diese Seite überhaupt ein Video? In diesen Fällen lautet die Antwort eher nein.
- Wenn es das Wichtigste verdrängt. Notdienst-Nummer, Öffnungszeiten, das konkrete Angebot: Wer etwas sucht, will nicht erst einen Drohnenflug ansehen.
- Wenn die Botschaft nur im Video steht. Überschrift und Kernaussage gehören als Text auf die Seite. Suchmaschinen, KI-Systeme und Screenreader lesen Text, keine Bilder in Bewegung.
- Wenn Text über unruhigem Bild verschwindet. Normaler Text braucht nach den Richtlinien für Barrierefreiheit einen Kontrast von mindestens 4,5 zu 1. Über bewegtem Bild klappt das nur mit einer abgedunkelten oder halbtransparenten Fläche.
- Wenn es automatisch mit Ton startet. Browser blockieren das ohnehin meist, und wo nicht, vertreibt es Besucher.
- Wenn es nichts erzählt. Ein Bürogebäude von außen oder eine Tastatur in Nahaufnahme kosten Ladezeit und sagen nichts, was ein Foto nicht auch sagen würde.
- Wenn die Seite schon langsam ist. Erst die Basis, dann Bewegung. Warum Ladezeit über Ranking und Anfragen mitentscheidet, steht in unserem Beitrag zum Website-Relaunch und den Core Web Vitals.
Die Einbindung: sechs Attribute, die den Unterschied machen
Ein Hero-Video ist im Kern ein einziges HTML-Element. Ob es fliegt oder bremst, entscheiden ein paar Attribute.
mutedundautoplay. Stummes Autoplay erlaubt Chrome immer, Safari ebenfalls. Mit Ton spielen Browser in der Regel erst nach einer Interaktion des Besuchers ab. Ein Hero-Video ist deshalb immer stumm.playsinline. Damit spielt Safari auf dem iPhone das Video im Seitenlayout ab statt im Vollbild.loop. Für die Endlosschleife. Schneiden Sie den Clip so, dass Anfang und Ende zusammenpassen, sonst springt das Bild bei jedem Durchlauf.poster. Das Standbild, bis das Video läuft. Ohne Poster zeigt der Browser nichts, bis das erste Bild da ist. Exportieren Sie das erste Bild des Loops als stark komprimiertes WebP oder AVIF und laden Sie es früh vor, denn es ist Ihr Kandidat für den LCP.preload. Für Videos weiter unten auf der Seitenoneodermetadata. Das ist nur ein Hinweis an den Browser, und beiautoplaylädt er ohnehin. Videos außerhalb des sichtbaren Bereichs lädt man deshalb am besten erst per Skript, wenn sie in Sichtweite kommen.- Mehrere
source-Elemente mittype. Der Browser nimmt die erste Quelle, die er abspielen kann. Moderne, kleinere Formate kommen zuerst, MP4 als sichere Rückfallebene zuletzt.
Safari pausiert Autoplay-Videos außerhalb des sichtbaren Bereichs selbst. Für alle anderen Browser hält ein kleines Skript den Loop an, sobald er aus dem Bild scrollt.
Quellen: Chrome Developers, Autoplay-Richtlinie · WebKit, Video-Richtlinien für iOS · MDN, das video-Element.
Formate und Kompression: das Rezept
| Format | Läuft auf | Dateigröße | Einsatz |
|---|---|---|---|
| MP4 mit H.264 | praktisch allen Geräten | Referenz | Pflicht als Rückfallebene |
| WebM mit VP9 | modernen Browsern | meist kleiner als H.264 | Zusätzliche Quelle |
| AV1 | neueren Browsern und Geräten | meist am kleinsten | Zusätzliche Quelle, nie allein |
| Animiertes GIF | überall | ein Vielfaches | Nie für bewegte Bilder |
MP4 ist nicht umsonst der Standard: 68 Prozent der Videodateien im Web haben diese Endung. Und wer noch GIFs als „Mini-Video“ einsetzt, verschenkt am meisten: In einem Beispiel von web.dev wiegt dieselbe Animation als GIF 3,7 MB, als MP4 551 KB und als WebM 341 KB.
Das Rezept in sechs Schritten:
- Kurz schneiden. 6 bis 12 Sekunden reichen für einen Loop. Länger heißt größer, nicht besser.
- Ruhige Motive wählen. Wenig Bewegung und wenig feine Details komprimieren deutlich besser. Wehendes Laub, Wasser und Konfetti sind die teuersten Motive der Welt, gemessen in Megabyte.
- Auflösung passend wählen. 1280 oder 1920 Pixel Breite für große Bildschirme, für Handys eine eigene, kleinere Fassung mit passendem Bildausschnitt, die per Skript abhängig von der Bildschirmbreite geladen wird.
- Ton raus, Faststart rein. Ein typischer Befehl mit dem freien Werkzeug FFmpeg:
ffmpeg -i hero.mov -an -vf "scale=1280:-2,fps=25" -c:v libx264 -crf 26 -preset slow -pix_fmt yuv420p -movflags +faststart hero.mp4. Dabei entfernt-andie Tonspur,-crfsteuert die Qualität (höherer Wert, kleinere Datei), und-movflags +faststartschiebt die Indexdaten an den Dateianfang, damit die Wiedergabe beginnt, bevor alles geladen ist. - Zielgröße prüfen. Unser Richtwert: Desktop-Loop unter 2 MB, Handy-Fassung unter 1 MB, Vorschaubild unter 100 KB. Liegt die Datei darüber, ist meist der Clip zu lang oder das Motiv zu unruhig.
- Selbst hosten. Hero-Loops gehören auf den eigenen Server oder ein Content-Delivery-Netz. Ein eingebetteter Player einer Videoplattform lädt Skripte von Dritten, braucht nach verbreiteter Auffassung eine Einwilligung im Cookie-Banner und zeigt am Ende fremde Empfehlungen. Längere Filme dürfen auf einer Plattform liegen, werden auf der Website aber erst nach einem Klick auf ein Vorschaubild geladen.
Quellen: HTTP Archive, Web Almanac 2024 · web.dev, GIFs durch Videos ersetzen.
Barrierefreiheit: Pause, Untertitel, weniger Bewegung
Ein sichtbarer Pause-Knopf. Die Richtlinien für barrierefreie Webinhalte (WCAG 2.2) verlangen im Erfolgskriterium 2.2.2 schon auf der Grundstufe A eine Möglichkeit zum Anhalten, Stoppen oder Ausblenden, wenn Bewegung automatisch startet, länger als fünf Sekunden dauert und neben anderen Inhalten läuft. Ein endloser Hero-Loop erfüllt alle drei Bedingungen. Der Knopf muss sichtbar sein, per Tastatur erreichbar und verständlich beschriftet, etwa „Video anhalten“.
Reduzierte Bewegung respektieren. Wer am Gerät „Bewegung reduzieren“ eingestellt hat, meldet das dem Browser über die Medienabfrage prefers-reduced-motion: reduce. Für diese Besucher zeigt die Seite nur das Vorschaubild. Für Menschen mit Gleichgewichtsstörungen ist das keine Stilfrage.
Untertitel für alles, was spricht. Ein stummer Loop braucht keine. Imagefilm, Erklärvideo und Mitarbeiterstatement schon. Auf der Website eignen sich zuschaltbare Untertitel als WebVTT-Datei über ein track-Element mit kind="captions", in Social-Media-Clips eingebrannte. Wann das Barrierefreiheitsstärkungsgesetz Untertitel zur Pflicht macht, erklärt unser Beitrag zu barrierefreien Videos nach dem BFSG. Ob das Gesetz für Ihre Website gilt, hängt vom Angebot ab. Verbindlich klärt das im Einzelfall ein Anwalt.
Kein Flackern. Mehr als drei Blitze pro Sekunde sind tabu. Das betrifft vor allem schnell geschnittene Clips mit harten Hell-Dunkel-Wechseln.
Was eine Website sonst braucht, um barrierefrei zu sein, zeigt unsere Seite zur barrierefreien Website.
Quellen: W3C, WCAG 2.2, Erfolgskriterium 2.2.2 · MDN, prefers-reduced-motion. Stand: 26.10.2026.
Messen statt hoffen
Ob die Arbeit gewirkt hat, zeigt ein Test vor und nach dem Einbau. PageSpeed Insights oder Lighthouse in den Chrome-Entwicklertools nennen das LCP-Element direkt: Steht dort das Video statt des Vorschaubilds, stimmt etwas nicht. Aussagekräftiger als ein einzelner Labortest sind die Felddaten echter Besucher, bewertet wird der Wert, den 75 Prozent der Seitenaufrufe erreichen. Testen Sie außerdem auf einem echten iPhone und mit gedrosselter Verbindung. Im Stromsparmodus spielt Safari Autoplay-Videos oft gar nicht ab, dann muss das Vorschaubild allein tragen.
Kurz gesagt
Video auf der Website funktioniert, wenn es eine Aufgabe hat und sauber eingebaut ist: stumm, kurz, mit kleinem Vorschaubild, als MP4 plus modernem Zusatzformat vom eigenen Server und unter einer klaren Dateigröße. Pause-Knopf, Rücksicht auf reduzierte Bewegung und Untertitel für alles, was spricht, sind Pflicht. Und wenn ein Video nichts erzählt oder das Wichtigste verdrängt, ist das beste Video gar keins.
REWLO Medienwerk baut Websites, auf denen Bewegtbild schnell lädt, sich anhalten lässt und etwas zu sagen hat, mit Filmen aus eigener Produktion. Mehr unter /leistungen.
