Hintergrundvideo im Header: So bleibt die Website schnell
Ein Hintergrundvideo im Header bleibt schnell, wenn es kurz, stumm und stark komprimiert ist und ein Standbild als Platzhalter hat. Das Video ist Stimmung, nicht Information: Alles Wichtige gehört in Text und Knöpfe darüber.
Das Wichtigste:
• Tonspur entfernen und als Schleife abspielen (autoplay, muted, loop, playsinline)
• Kurze Schleife von etwa 10 bis 20 Sekunden, Auflösung passend zur Anzeigegröße
• Standbild (Poster) zeigt sofort etwas, auch wenn das Video noch lädt oder nicht startet
• Pause-Knopf anbieten: Bewegte Inhalte, die automatisch starten und länger als 5 Sekunden laufen, brauchen nach WCAG 2.2.2 eine Möglichkeit zum Anhalten
• Bei der Systemeinstellung „Bewegung reduzieren“ (prefers-reduced-motion) nur das Standbild zeigen
Praxis-Tipp: Legen Sie Texte auf ruhige Bildbereiche und dunkeln Sie das Video leicht ab, damit die Schrift lesbar bleibt. Auf dem Handy reicht oft eine kleinere Datei oder nur das Standbild. Das Header-Video ist meist das erste, was sichtbar wird – laden Sie es deshalb nicht verzögert, sondern sorgen Sie mit Standbild und kleiner Datei für einen schnellen Start.
Mehr dazu im auvimix-Ratgeber: https://auvimix.de/einbetten/video-ladezeit-website/
Alle 100 Video-Tipps für Unternehmen: https://auvimix.com/c/nextao
Das Wichtigste:
• Tonspur entfernen und als Schleife abspielen (autoplay, muted, loop, playsinline)
• Kurze Schleife von etwa 10 bis 20 Sekunden, Auflösung passend zur Anzeigegröße
• Standbild (Poster) zeigt sofort etwas, auch wenn das Video noch lädt oder nicht startet
• Pause-Knopf anbieten: Bewegte Inhalte, die automatisch starten und länger als 5 Sekunden laufen, brauchen nach WCAG 2.2.2 eine Möglichkeit zum Anhalten
• Bei der Systemeinstellung „Bewegung reduzieren“ (prefers-reduced-motion) nur das Standbild zeigen
Praxis-Tipp: Legen Sie Texte auf ruhige Bildbereiche und dunkeln Sie das Video leicht ab, damit die Schrift lesbar bleibt. Auf dem Handy reicht oft eine kleinere Datei oder nur das Standbild. Das Header-Video ist meist das erste, was sichtbar wird – laden Sie es deshalb nicht verzögert, sondern sorgen Sie mit Standbild und kleiner Datei für einen schnellen Start.
Mehr dazu im auvimix-Ratgeber: https://auvimix.de/einbetten/video-ladezeit-website/
Alle 100 Video-Tipps für Unternehmen: https://auvimix.com/c/nextao
0 Kommentare
Kommentieren können angemeldete Mitglieder. Anmelden