Hintergrundvideo im Herobereich: Sinnvoll oder Bremse? Leitfaden zu Ladezeit, Barrierefreiheit und Mobil

Wir, Talha Aslan und Team, hören diese Frage in fast jedem Webdesignprojekt. Denn Video lässt eine Website auf den ersten Blick lebendig wirken. Allerdings kann dasselbe Video zur schwersten Datei der Seite werden. Außerdem erschwert es oft das Lesen der Überschrift und erzeugt Bewegung, die manche Besucher als unangenehm empfinden. In diesem Leitfaden zeigen wir, wie wir die Entscheidung treffen, wie wir die Umsetzung Schritt für Schritt angehen und wann wir davon abraten.

Die allgemeine Frage nach Video und Conversions behandeln wir in einem eigenen Beitrag: Video auf der Website und die Conversion Rate. Hier geht es also nur um das Hintergrundvideo auf dem ersten Bildschirm.

Welche Aufgabe hat der Herobereich eigentlich?

Der Herobereich ist die Fläche, die Besucher sehen, bevor sie scrollen. Er hat drei Aufgaben. Zunächst beantwortet er die Frage „Wo bin ich?“. Dann nennt er das Nutzenversprechen in einem Satz. Schließlich zeigt er den nächsten Schritt. Der Hintergrund dient also diesen drei Aufgaben; er ist Nebendarsteller, nicht Hauptrolle.

Wie Sie den ersten Bildschirm planen, erklären wir im Beitrag Above the Fold im Webdesign. Hier genügt eine Erinnerung: Wenn Besucher Überschrift, Unterzeile und Button nicht lesen können, spielt ein eindrucksvoller Hintergrund keine Rolle. Anders gesagt, Video verdient seinen Platz nur, wenn es diese Elemente stärkt.

• Überschrift: sagt klar, was Sie anbieten.
• Unterzeile: zeigt, für wen das Angebot ist und welches Ergebnis es bringt.
• Button: hebt eine einzige Aktion hervor, etwa eine Angebotsanfrage oder eine Buchung.
• Hintergrund: zeigt Stimmung oder Beleg hinter dieser Botschaft.

Wann funktioniert ein Hintergrundvideo im Herobereich wirklich?

Video funktioniert, wenn die Bewegung selbst eine Information trägt. Zum Beispiel lassen sich die Atmosphäre eines Lokals, die Präzision einer Fertigung oder eine Dienstleistung vor Ort selten in einem einzigen Bild zeigen. In solchen Fällen schafft eine kurze Schleife schneller Vertrauen als ein langer Absatz.

Beispielszenario: Ein Boutiquehotel zeigt in einer acht Sekunden langen, stummen Schleife Zimmer und Terrasse bei Sonnenuntergang. Das Video beantwortet also die Frage „Wie ist es dort?“. Andererseits liefert ein Stockvideo mit tippenden Händen auf der Startseite einer Steuerkanzlei keine neue Information. Zudem bremst es die Seite.

• Unternehmen, die einen Ort oder ein Erlebnis verkaufen: Hotels, Restaurants, Eventlocations.
• Produkte in Bewegung: Fahrzeuge, Sportgeräte, Maschinen.
• Leistungen mit sichtbarem Ablauf: Fertigung, Bau, Handwerk.
• Marken mit einem Imagefilm, den sie über einen kurzen Ausschnitt vorstellen möchten.

Wann verzichten Sie besser auf das Video?

Auf Seiten, auf denen Besucher schnell entscheiden, ein Formular ausfüllen oder Preise vergleichen, lenkt Video oft ab. Außerdem hinterlassen beliebige Stockaufnahmen eher den Eindruck einer Vorlagenseite als Vertrauen. Deshalb beginnen wir die Entscheidung bei der Aufgabe der Seite, nicht bei der Ästhetik.

Ein weiteres Signal ist das Ziel der Seite. Wenn der erste Bildschirm vor allem zu einem Formular führen soll, zieht Bewegung den Blick davon weg. Auf solchen Seiten macht ein ruhiger Hintergrund den Button sichtbarer und erleichtert die Entscheidung. Kurz gesagt, weniger Elemente im Wettbewerb um Aufmerksamkeit sind oft der wirksamste Designschritt.

Auch technische Bedingungen zählen. Wenn die meisten Besucher mit mobilen Daten kommen und Ihr Hosting oder Ihre Auslieferung nicht auf Video vorbereitet ist, wirkt ein gut gewähltes Foto besser. Ein Video ist somit eine Entscheidung mit Begründung, keine Pflicht.

Wie beeinflusst ein Hintergrundvideo im Herobereich den LCP?

LCP (Largest Contentful Paint) ist die Core Web Vitals Kennzahl, die misst, wann das größte Inhaltselement im ersten Bildschirm erscheint. Laut web.dev kommen auch Videoelemente als LCP Kandidat infrage. Bei Videos zählt die Ladezeit des Posterbilds oder die Anzeige des ersten Frames, je nachdem, was früher eintritt.

Daher ist ein bildschirmfüllendes Herovideo häufig das LCP Element der Seite. Ohne Poster wartet der Browser auf den ersten Frame, und der hängt vom Herunterladen und Dekodieren des Videos ab. Dieselbe Seite nennt einen LCP von 2,5 Sekunden oder weniger als gut. Die ganze Kennzahl erklären wir in Was ist LCP und wie verbessern Sie ihn.

In der Praxis sehen wir folgendes Muster. Wenn Sie das Poster gut komprimieren und früh laden, bestimmt das Poster den LCP weitgehend. Dann erscheint der erste Bildschirm schnell, auch wenn das Video später folgt. Deshalb behandeln wir das Poster als Hauptbild des ersten Bildschirms, nicht als Notlösung.

Warum ist das Posterbild das eigentliche Hauptbild?

Das Poster ist das Standbild, das vor der Wiedergabe erscheint. Laut der MDN Referenz zum Videoelement zeigt der Browser ohne Poster nichts an, bis der erste Frame bereitsteht. Ohne Poster sehen Besucher also einen Moment lang eine leere oder einfarbige Fläche.

Wir wählen das Poster immer passend zum ersten Frame des Videos. So springt beim Start der Wiedergabe nichts. Zudem muss das Poster allein funktionieren, denn Besucher mit Wunsch nach reduzierter Bewegung oder mit langsamen Geräten sehen eventuell nur das Poster.

• Wählen Sie ein Bild nahe am ersten Frame des Videos.
• Nutzen Sie ein modernes Format (WebP oder AVIF) und passende Abmessungen.
• Laden Sie das Poster mit hoher Priorität, nicht per Lazy Loading.
• Lassen Sie dort, wo der Text steht, eine ruhige Fläche mit wenig Details.

Allgemeine Regeln zur Komprimierung finden Sie im Beitrag Bilder für die Website optimieren.

Warum muss Autoplay immer stumm sein?

Browser schränken Autoplay mit Ton ein. Die Autoplay Richtlinie von Chrome sagt klar, dass stummer Autoplay immer erlaubt ist. Autoplay mit Ton hängt dagegen von Bedingungen ab, etwa davon, ob der Nutzer schon mit der Website interagiert hat. Auch MDN weist darauf hin, dass moderne Browser Videos mit hörbarer Tonspur am automatischen Start hindern.

Deshalb ist das Attribut muted beim Herovideo keine Option, sondern Pflicht. Zudem sollte Ton in einem Hintergrundvideo ohnehin keine Bedeutung tragen; Überschrift und Text tragen die Botschaft. Brauchen Sie Ton, dann ist es kein Hintergrund mehr. Es ist dann ein Video zum Anschauen und gehört mit Steuerelementen in einen eigenen Abschnitt.

Ein Hinweis aus der Chrome Dokumentation ist besonders wichtig: Gehen Sie nie davon aus, dass das Video startet. Lehnt der Browser die Wiedergabe ab, muss die Seite trotzdem vollständig wirken; das Poster muss also allein genügen. In unseren Umsetzungen blenden wir außerdem den Pausenknopf aus, wenn die Wiedergabe nicht startet. Ein Pausenknopf an einem stehenden Video verwirrt nur.

Welche Videoattribute gehören zusammen?

Vier Attribute treten beim Hintergrundvideo fast immer gemeinsam auf: autoplay, muted, loop und playsinline. Der web.dev Leitfaden zum Lazy Loading von Videos nennt playsinline als notwendig, damit Autoplay unter iOS funktioniert. Außerdem gibt das Attribut preload dem Browser einen Hinweis, wie viele Daten er vorab laden soll.

MDN erinnert daran, dass preload nur ein Hinweis ist und autoplay Vorrang vor preload hat. Kurz gesagt, mit autoplay muss der Browser das Video laden. Daher zählt eine kleine Datei mehr als die Feinabstimmung der Attribute.

Wie kurz und leicht sollte die Videodatei sein?

Eine allgemeingültige Zahl nennen wir hier nicht, denn die richtige Größe hängt von Zielgruppe, Geräten und Infrastruktur ab. Allerdings sieht unser Startbereich aus der Praxis so aus, und er ist keine Garantie: eine Schleife von 6 bis 15 Sekunden ohne Tonspur, kodiert für die tatsächliche Anzeigegröße.

Die Tonspur zu entfernen ist ein einfacher Schritt, den viele vergessen. Zudem braucht ein Hintergrundvideo keine feinen Details, denn darüber liegen Text und meist eine halbtransparente Ebene. Somit sieht auch eine niedrigere Bitrate gut aus.

1. Beschränken Sie das Video auf wenige Szenen; wählen Sie langsame Bewegung statt schneller Schnitte.
2. Entfernen Sie die Tonspur vollständig.
3. Erstellen Sie zwei Fassungen in unterschiedlicher Auflösung für Desktop und Smartphone.
4. Bieten Sie ein modernes Format zusammen mit einem breit kompatiblen Format an.
5. Verbinden Sie Ende und Anfang der Schleife so, dass kein Übergang auffällt.

Beispielrechnung: Die meisten monatlichen Besuche kommen vom Smartphone, und das Herovideo wiegt einige Megabyte. Dann lädt jeder Besuch diese Daten nur für den ersten Bildschirm. Lösen Sie dieselbe Fläche mit einem komprimierten Poster, sinkt die Datenmenge deutlich. Deshalb empfehlen wir für Mobilgeräte eine eigene Entscheidung.

Was ersetzt das Hintergrundvideo im Herobereich auf dem Smartphone?

Auf dem Smartphone haben Sie drei Optionen: eine kleinere Videofassung, nur das Poster oder eine ganz eigene Komposition im Hochformat. In den meisten Projekten starten wir mobil mit dem Poster. Eine kleinere Videofassung liefern wir nur, wenn sie wirklich Bedeutung hinzufügt.

Wer ein Querformatvideo für einen hochkant gehaltenen Bildschirm beschneidet, schiebt das Hauptmotiv oft aus dem Bild. Zum Beispiel rutscht ein Produkt, das am Desktop mittig steht, im mobilen Ausschnitt an den Rand. Ein eigener mobiler Bildausschnitt zählt also für die Bildsprache, nicht nur für die Dateigröße. Die Grundhaltung dahinter erklären wir in Was ist Mobile First Design.

Außerdem behandeln mobile Browser Autoplay im Stromsparmodus oder beim Datensparen eventuell anders. Daher muss das Poster auf dem Smartphone allein einen vollständigen ersten Bildschirm liefern.

Was sehen Besucher mit Wunsch nach reduzierter Bewegung?

Betriebssysteme bieten eine Bedienungshilfe, mit der Nutzer Bewegung reduzieren können. Die MDN Referenz zur Medienabfrage für reduzierte Bewegung erklärt, dass diese Einstellung die Seite als Medienmerkmal erreicht. Sie erklärt außerdem, warum weniger Bewegung für Menschen mit vestibulären Störungen (Gleichgewicht und Bewegungswahrnehmung) wichtig ist.

Ist diese Einstellung aktiv, starten wir das Video gar nicht und zeigen nur das Poster. Besucher erhalten also dieselbe Botschaft und dieselbe Bildsprache, nur ohne Bewegung. So bleibt das Design stimmig, und niemand trifft auf Bewegung, die ihm unangenehm ist.

Das Video nur per CSS auszublenden reicht eventuell nicht, weil der Browser es trotzdem laden kann. Stattdessen fügen wir Wiedergabe und bei Bedarf die Videoquelle erst hinzu, nachdem wir die Einstellung gelesen haben. Den größeren Rahmen beschreibt unser Beitrag barrierefreie Website nach WCAG.

Ist ein Pausenknopf Pflicht?

Ja, bei einem Video in Schleife ist er in der Praxis Pflicht. Das WCAG Erfolgskriterium 2.2.2 Pausieren, Beenden, Ausblenden betrifft bewegte Inhalte, die automatisch starten, länger als fünf Sekunden dauern und neben anderen Inhalten erscheinen. Für solche Inhalte verlangt es eine Möglichkeit zum Pausieren, Beenden oder Ausblenden. Das Kriterium gehört zur Stufe A, also zur grundlegendsten Stufe.

Wir gestalten den Knopf sichtbar, per Tastatur bedienbar und klar beschriftet. Zum Beispiel ergänzen wir statt eines reinen Symbols eine Beschriftung, die ein Screenreader als „Hintergrundvideo pausieren“ vorliest. Außerdem wirkt das Erlebnis stimmiger, wenn die Website die Wahl nach dem Neuladen behält.

• Der Knopf sollte den Text nicht verdecken, aber leicht auffindbar sein.
• Bei Tastaturfokus braucht er einen sichtbaren Fokusrahmen.
• Nach dem Pausieren sollte das Video auf dem ersten Frame oder dem Poster stehen.
• Startet die Wiedergabe nie, blenden Sie den Knopf aus.

Wie bleibt Text über dem Video lesbar?

Ein bewegter Hintergrund verändert ständig den Kontrast hinter Ihrem Text. Eine Fläche, die in einem Frame dunkel ist, kann im nächsten hell sein. Deshalb ist eine halbtransparente dunkle Ebene oder ein weicher Verlauf hinter dem Text der sicherste Weg zur Lesbarkeit.

Wir prüfen den Kontrast getrennt im hellsten und im dunkelsten Frame des Videos. Auch das Poster prüfen wir auf dieselbe Weise, weil manche Besucher nur das Poster sehen. Mehr zum Thema finden Sie im Beitrag Kontrast im Webdesign.

Auch beim Dreh können Sie vorsorgen. Lassen Sie dort, wo der Text stehen soll, einen ruhigen Himmel, eine schlichte Wand oder eine unscharfe Zone. So bleibt die Ebene leicht, und das Video behält seinen Charakter.

Wirkt sich ein Hintergrundvideo im Herobereich direkt auf SEO aus?

Ein Hintergrundvideo bringt allein keinen Rankingvorteil. Die Wirkung ist indirekt, nämlich über Seitenerlebnis, Geschwindigkeit und Verständlichkeit. Zum Beispiel verlieren Sie bei Suche und Nutzern zugleich, wenn das Video den LCP verschlechtert oder die Überschrift nur im Video steht.

Deshalb schreiben wir Überschrift und Nutzenversprechen immer als echten HTML Text und setzen nie Text ins Video. Zudem ist ein Hintergrundvideo kein Inhalt zum Anschauen; strukturierte Videodaten dafür ergeben daher selten Sinn. Wie Ladezeit und Rankings zusammenhängen, beschreiben wir ausführlicher in Core Web Vitals erklärt.

Bremst das Video andere Teile der Seite aus?

Ja, bei schlechter Umsetzung schon. Während das Video die Bandbreite des ersten Bildschirms nutzt, warten Schriften, Stylesheets und wichtige Bilder eventuell. Außerdem beschäftigt eine große Videoquelle auf langsamen Geräten den Prozessor beim Dekodieren.

Deshalb legen wir die Reihenfolge so fest: zuerst Text, Styles und Poster, dann die Videoquelle. So können Besucher lesen und klicken, während das Video im Hintergrund lädt. Videos weiter unten sollten erst laden, wenn sie sich dem sichtbaren Bereich nähern; das erklären wir in Was ist Lazy Loading. Allerdings sollten Sie das Poster im ersten Bildschirm nie verzögert laden.

Welche Alternativen zum Video gibt es?

Nicht jeder Wunsch nach Bewegung verlangt ein Video. Manchmal erzeugt eine leichte CSS Animation, ein langsam gleitendes Foto oder eine ruhige Überblendung zwischen wenigen Bildern dasselbe Gefühl zu deutlich geringeren Kosten. Andererseits liefern ein starkes Foto und eine klare Überschrift ganz ohne Bewegung oft das beste Ergebnis.

Vor allem das Video per Klick bietet Interessierten das volle Erlebnis und hält trotzdem den ersten Bildschirm für alle leicht. Zudem ist dabei auch Ton möglich, weil der Nutzer mit der Seite interagiert hat.

Stockvideo oder eigener Dreh, was passt besser?

Stockvideos sind ein schneller und günstiger Start. Allerdings ist die Chance hoch, dass Besucher denselben Clip schon auf anderen Websites gesehen haben. Fällt ihnen das auf, signalisiert das Video Beliebigkeit statt Vertrauen. Deshalb schätzen wir meist einen kurzen eigenen Dreh, der den echten Ort, das Produkt oder das Team der Marke zeigt.

Ein eigener Dreh muss nicht teuer sein. Zum Beispiel reichen einige Szenen mit festem Stativ, Tageslicht und langsamer Kamerafahrt für einen Hintergrund völlig aus. Zudem braucht ein Hintergrundvideo keine gestochen scharfen Details, denn Text und Ebene liegen darüber.

• Stockvideo: schnell und günstig, aber nicht markenspezifisch; prüfen Sie die Lizenzbedingungen.
• Eigener Dreh: markenspezifisch und vertrauenswürdig, braucht aber Planung und einen Drehtag.
• Ausschnitt aus einem vorhandenen Imagefilm: am effizientesten, wenn Sie schon einen haben; schneiden Sie ihn nur sauber zur Schleife.

Was Sie auch wählen, klären Sie Lizenz und Nutzungsrechte schriftlich. Vor allem bei Aufnahmen mit erkennbaren Gesichtern sollten Sie die Einwilligung nicht überspringen.

Worauf achten Sie bei Dreh und Schnitt?

Ein Hintergrundvideo sollte nicht wie ein Werbespot wirken. Schnelle Schnitte, plötzliche Zooms und starke Farbwechsel erschweren das Lesen. Stattdessen wählen wir langsame, ruhige Bewegung in eine Richtung. Zum Beispiel fährt die Kamera langsam durch einen Raum oder dreht sich sanft um ein Produkt.

Den Bildausschnitt planen wir ebenfalls um den Textbereich herum. Am Desktop steht der Text meist links oder mittig. Also können Sie die Ebene leicht halten, wenn das Hauptmotiv auf der anderen Seite liegt. Auf dem Smartphone wird das Bild hochkant, daher ist ein mittig platziertes Motiv sicherer.

Denken Sie außerdem schon im Schnitt an den Schleifenpunkt. Gibt es einen sichtbaren Sprung zwischen letztem und erstem Frame, bemerken Besucher ihn bei jedem Durchlauf. Ein kurzer Übergang oder zwei ähnliche Momente am Anfang und Ende lösen das. Schließlich sollte die Farbgebung zur Palette der Website passen, damit das Video wie ein Teil des Designs wirkt.

Was prüfen Sie bei der Infrastruktur?

Woher Sie das Video ausliefern, zählt genauso wie die Datei selbst. Bei einem Shared Hosting Paket belasten große Mediendateien den Server, wenn viele Besucher gleichzeitig kommen. Daher empfehlen wir die Auslieferung über ein Content Delivery Network (CDN) oder einen Speicherdienst, der für Medien geeignet ist.

Außerdem verhindern sinnvolle Cachezeiten im Browser, dass wiederkehrende Besucher dasselbe Video erneut laden. Andererseits eignen sich eingebettete Player von Videoplattformen selten für einen Hintergrund. Denn sie bringen zusätzliche Skripte, eine Playeroberfläche und eigene Ladezeit mit.

1. Liefern Sie das Video als direkte Datei von Ihrer Domain oder über ein CDN aus.
2. Halten Sie Cachezeiten lang und benennen Sie die Datei bei Änderungen neu.
3. Nutzen Sie ein schlichtes Videoelement statt eines eingebetteten Players.
4. Beobachten Sie nach dem Start einige Tage lang Serverlast und Fehlerprotokolle.

Wie ändert sich die Entscheidung in drei Beispielszenarien?

Dieselbe Frage führt bei verschiedenen Unternehmen zu verschiedenen Antworten. Die drei Beispielszenarien unten zeigen unsere Überlegungen. Wichtig ist dabei die Denkweise, nicht Zahlen oder Ergebnisse.

Szenario eins: ein Restaurant am Meer. Besucher wollen wissen, wie sich ein Abend dort anfühlt. Hier ist eine kurze Schleife mit Tischen und Meerblick im Abendlicht eine starke Wahl. Allerdings muss der Reservierungsbutton auf dem Smartphone im ersten Bildschirm bleiben, deshalb starten wir mobil mit dem Poster.

Szenario zwei: eine Anwaltskanzlei. Besucher suchen Vertrauen, Fachwissen und Kontaktdaten. Ein bewegter Hintergrund fügt dieser Botschaft nichts hinzu und schwächt eventuell sogar den seriösen Eindruck. Daher empfehlen wir eine klare Überschrift, ein schlichtes Foto und einen gut sichtbaren Kontaktbutton.

Szenario drei: ein Hersteller von Industriemaschinen. Wie sich die Maschine im Betrieb bewegt, ist für Käufer eine nützliche Information. Also setzen wir das Video ein, halten es aber kurz und stumm. Die ausführliche Produktdemo platzieren wir weiter unten als Video per Klick. So bleibt der erste Bildschirm leicht, und Interessierte erreichen trotzdem das ganze Video.

Wie setzen wir es Schritt für Schritt um?

Die folgende Reihenfolge entspricht unserem Ablauf in Projekten. Code zeigen wir hier nicht; wir erklären die Logik, denn die Umsetzung hängt von Ihrer Plattform ab.

1. Halten Sie den Zweck fest: Welche Frage beantwortet das Video? Wenn keine, bleiben Sie beim Foto.
2. Planen Sie Dreh oder Schnitt rund um den Textbereich.
3. Erstellen Sie eine kurze Schleife und löschen Sie die Tonspur.
4. Kodieren Sie getrennte Fassungen für Desktop und Smartphone.
5. Erstellen Sie ein leichtes Poster passend zum ersten Frame und laden Sie es mit Priorität.
6. Stellen Sie das Video auf stumm, Schleife und Wiedergabe innerhalb der Seite.
7. Lesen Sie die Einstellung zu reduzierter Bewegung; ist sie aktiv, zeigen Sie nur das Poster.
8. Ergänzen Sie einen sichtbaren, per Tastatur bedienbaren Pausenknopf.
9. Testen Sie, ob die Seite mit dem Poster vollständig wirkt, wenn die Wiedergabe scheitert.
10. Messen Sie LCP und Ladezeit auf echten Geräten.

Alle diese Schritte setzen wir gern auf Ihrer Website um; den Ablauf von Gestaltung bis Messung übernehmen wir im Rahmen unserer Webdesignleistungen.

Was gehört auf die Checkliste vor dem Livegang?

Vor dem Livegang empfehlen wir, die folgende Liste Punkt für Punkt abzuhaken. So kommt eine ästhetische Entscheidung später nicht als technisches Problem oder Barrierefreiheitslücke zurück.

• Zeigt das Video etwas, das ein Foto nicht zeigen kann?
• Können Besucher Überschrift und Button im hellsten und dunkelsten Frame lesen?
• Gibt es ein Poster, passt es zum ersten Frame, und lädt es mit Priorität?
• Ist das Video stumm, und haben Sie die Tonspur aus der Datei entfernt?
• Ist das Attribut playsinline gesetzt?
• Bleibt das Video bei reduzierter Bewegung still?
• Ist der Pausenknopf sichtbar, beschriftet und per Tastatur bedienbar?
• Gibt es eine eigene mobile Fassung oder eine Posterlösung?
• Wirkt die Seite vollständig, wenn der Browser die Wiedergabe ablehnt?
• Liegt der LCP auf echten Geräten in einem akzeptablen Bereich?

Wie messen Sie den Erfolg, und wann bauen Sie zurück?

Betrachten Sie das Video als Experiment. Halten Sie zunächst Ladezeit und Conversiondaten des bisherigen ersten Bildschirms fest. Dann schalten Sie die Videofassung live und vergleichen dieselben Werte. Testen Sie beide Fassungen nach Möglichkeit im selben Zeitraum, denn so filtern Sie saisonale Effekte heraus.

Wir beobachten vor allem LCP und Ladezeit, Klicks auf den Button im ersten Bildschirm, Verweildauer und den Unterschied zwischen Smartphone und Desktop. Beispielszenario: Am Desktop steigt die Interaktion, auf dem Smartphone sinkt die Geschwindigkeit. Dann ist es ein sinnvoller Mittelweg, das Video am Desktop zu behalten und mobil zum Poster zurückzukehren.

Kurz gesagt, ein Hintergrundvideo im Herobereich ist keine Entscheidung, die Sie einmal treffen und dann vergessen. Zeigen die Daten keinen Beitrag des Videos, ist der Verzicht ebenfalls eine gelungene Designentscheidung.

Welche Fehler sehen wir beim Herovideo am häufigsten?

Die meisten Fehler entstehen, weil das Video als Dekoration gilt. Dabei sollte jedes Element im ersten Bildschirm eine Aufgabe haben. Die folgende Liste fasst die Probleme zusammen, die uns in Projekten am häufigsten begegnen.

• Livegang ohne Poster und eine leere Fläche in den ersten Sekunden.
• Tonspur in der Datei lassen und unnötige Daten laden.
• Überschrift ins Video einbauen statt echten HTML Text zu schreiben.
• Den Pausenknopf weglassen.
• Querformatvideo mobil beschneiden und das Hauptmotiv verlieren.
• Stockvideos ohne Bezug zur Marke verwenden.

Alle diese Fehler lassen sich schon in der Gestaltungsphase vermeiden. Möchten Sie Ihren ersten Bildschirm mit uns überarbeiten, beschreiben Sie Ihren Bedarf; wir nennen Ihnen den passenden Umfang und ein Angebot über unsere Webdesignbetreuung.