Hero-Video
Ein Hero-Video ist ein kurzer, lautlos in Endlosschleife abgespielter Video-Loop (in der Regel acht bis fünfzehn Sekunden) im obersten Bereich der Startseite, der in wenigen Sekunden Atmosphäre, Lage oder Produkt vermittelt.
Hero-Videos sind das bewegte Pendant zum klassischen Hero-Bild. Sie binden Aufmerksamkeit länger als statische Bilder, müssen aber technisch und gestalterisch sauber umgesetzt sein, um nicht die Ladezeit zu zerstören oder vom eigentlichen Inhalt abzulenken.
In einfachen Worten
Ein Hero-Video übernimmt im oberen Seitenbereich die Rolle, die früher das große Hero-Bild auf der Zeitungs-Titelseite spielte: Es ist das Erste, was Besucher wahrnehmen, und beeinflusst die Entscheidung zum Verweilen in den ersten Sekunden. Im Unterschied zu einem klassischen Video-Player läuft es lautlos in einer Endlosschleife, ohne Bedienelemente und ohne harte Schnitte. Technisch handelt es sich um eine optimierte Videodatei (MP4 in H.264 oder H.265) mit einem statischen Poster-Frame, der angezeigt wird, bevor das Video fertig geladen ist – wichtig für den Largest Contentful Paint. Die Bewegung sollte ruhig sein, damit sie als Hintergrund-Atmosphäre wirkt und nicht von der eigentlichen Botschaft ablenkt.
Wozu brauche ich das?
Hero-Videos eignen sich überall dort, wo Lage, Größe oder Atmosphäre Teil des Verkaufs-Versprechens sind: Hotellerie, Industrie, Architektur, Tourismus, Gastronomie und Praxen mit hochwertigen Räumen. Auf rein dienstleistungs-getriebenen Websites (Beratung, Software) wirken sie häufig deplatziert, weil dort keine atmosphärische Komponente verkauft wird. Bewegtes Bild bindet Aufmerksamkeit messbar länger als ein statisches Hero-Bild – die Wirkung ist überall dort am stärksten, wo Atmosphäre wichtiger ist als technische Detail-Tiefe.
Beispiel aus der Praxis
Eine typische Konstellation in der Hotellerie: Ein Hotel mit visuell starker Lage zeigt auf der Startseite ein statisches Drohnenbild – die Atmosphäre wirkt eingefroren. Mit der Umstellung auf einen ruhigen Drohnen-Loop (etwa zwölf Sekunden Länge, 1920 × 1080 Bildpunkte bei rund 4 Mbit/s, mehrere Megabyte Dateigröße) inklusive Poster-Frame und Mobile-Fallback verbessert sich die Wirkung deutlich: Die Verweildauer auf der Startseite steigt sichtbar, die Absprung-Rate auf mobilen Geräten sinkt. Der Largest Contentful Paint bleibt im grünen Bereich, weil das Poster-Frame als priorisiertes Bild ausgeliefert wird und das Video erst danach im Hintergrund nachlädt.
Wirtschaftlicher Nutzen
Eine professionelle Hero-Video-Produktion umfasst Drehbuch, Material, Schnitt, Encoding und die saubere Web-Integration mit Poster-Frame, Mobile-Fallback und ressourcen-schonender Auslieferung. Der wirtschaftliche Hebel entsteht über zwei Wege: längere Verweildauer im oberen Seitenbereich und höhere Konvertierung, weil bewegtes Bild stärker bindet als statische Bilder. Die Wirkung ist besonders deutlich in Branchen, deren Verkaufs-Argument visuell transportiert werden kann – Hotellerie, Architektur, Tourismus, hochwertige Industrie. In rein faktisch geprägten Branchen ist der Effekt geringer; dort lohnt sich die Investition oft nicht.
Typische Fehler
- Hero-Video mit Tonspur ausgeliefert – moderne Browser blockieren Auto-Play mit Ton, das Video bleibt schwarz.
- Kein Poster-Frame definiert – der Hero-Bereich ist beim Laden mehrere Augenblicke lang grau, der Largest Contentful Paint leidet.
- Volle 4K-Auflösung auch für mobile Geräte ausgeliefert – die große Dateigröße zerstört die Ladezeit auf mobilen Verbindungen.
- Lazy Loading auf das Hero-Video angewendet – der Largest Contentful Paint wird absichtlich verzögert, statt beschleunigt.
- Harte Schnitte, schnelle Bewegungen oder Text-Einblendungen im Video – die Aufmerksamkeit wird vom eigentlichen Seiten-Inhalt abgezogen.
Worauf achten?
- Video lautlos und ohne Bedienelemente abspielen – mit den Attributen autoplay, loop, muted und playsinline.
- Poster-Frame als priorisiertes LCP-Element ausliefern, bevor das Video selbst geladen wird.
- Mobile-Fallback einplanen – entweder nur das Poster-Bild zeigen oder eine deutlich kleinere Video-Variante in niedrigerer Auflösung.
- Länge im Bereich von acht bis fünfzehn Sekunden halten, ruhige Bewegungen, keine harten Schnitte.
- Encoding mit moderater Bitrate (4 bis 6 Mbit/s) in H.264 oder H.265 als MP4 – höhere Bitraten bringen kaum sichtbaren Mehrwert, aber spürbar mehr Volumen.
Häufig gestellte Fragen
Wann lohnt sich ein Hero-Video?
Vor allem dort, wo Atmosphäre, Lage oder Größe Teil des Verkaufs-Arguments sind – Hotellerie, Architektur, Tourismus, Industrie, Praxen mit hochwertigen Räumen. Für rein faktisch geprägte Branchen wie Software oder Beratung ist der Effekt meist gering.
Wie lang sollte ein Hero-Video sein?
In der Regel acht bis fünfzehn Sekunden. Kürzere Loops wirken hektisch, längere binden Ressourcen ohne zusätzlichen Nutzen. Die Länge sollte so gewählt sein, dass der Übergang vom Ende zum Anfang des Loops nicht als Schnitt wahrgenommen wird.
Welche Datei-Größe ist sinnvoll?
Für die Desktop-Variante typischerweise wenige Megabyte bei 1920 × 1080 Bildpunkten und einer moderaten Bitrate von 4 bis 6 Mbit/s. Für mobile Endgeräte ist eine deutlich kleinere Variante oder ein reines Poster-Bild ohne Video die robustere Wahl.
Was ist ein Poster-Frame?
Ein statisches Bild, das angezeigt wird, bevor das Video fertig geladen ist. Es übernimmt die Rolle des Largest Contentful Paint und stellt sicher, dass der Hero-Bereich sofort visuell gefüllt ist – nicht erst, nachdem das Video vollständig nachgeladen wurde.
Wirkt sich ein Hero-Video auf die Ladezeit aus?
Bei sauberer Umsetzung kaum, bei schlechter Umsetzung erheblich. Entscheidend sind ein priorisiertes Poster-Frame, ein passendes Encoding und ein mobile-Fallback. Lazy Loading darf nicht auf das Hero-Video angewendet werden, sonst leidet der Largest Contentful Paint.