Hintergrundvideo für Website (HTML5)
Gib die Adresse des Videos (MP4 oder WebM) und des Titelbilds an. Der Code kommt schon mit den Attributen, die Browser zum automatischen Abspielen verlangen.
So geht’sVideo läuft im Hintergrund oben
Verfügbar auf: 
Hintergrundvideo für Website (HTML5): wofür es gut ist
Ein kurzes Video, das im Hintergrund am Seitenanfang läuft, zeigt gleich die Umgebung, das Produkt oder den Service. Damit es auf dem Handy funktioniert, muss das Video ohne Ton sein und die Attribute muted, autoplay und playsinline haben.
Der Generator baut den Bereich mit dem Video-Tag in MP4 und WebM, Titelbild, einstellbarer dunkler Ebene für lesbaren Text, Titel und Text sowie einer Pause-Taste, wie die WCAG sie für Inhalte verlangt, die sich länger als 5 Sekunden bewegen. Für alle, die weniger Bewegung wollen, startet das Video bereits pausiert.
So geht’s
- Gib die Adressen von Video und Titelbild an.
- Schreibe Titel und Text und stelle die dunkle Ebene ein.
- Kopiere den Code und füge ihn am Seitenanfang ein.
Wann nutzen
- Kopfbereich einer Restaurant- oder Hotel-Website.
- Landingpage für eine Veranstaltung.
- Seite eines Immobilienmaklers oder Fitnessstudios.
Häufige Fragen
Warum startet das Video auf dem Handy nicht von selbst?
Browser lassen nur Videos ohne Ton von selbst abspielen. Das Video braucht die Attribute muted, autoplay und auf dem iPhone playsinline, sonst öffnet es sich im Vollbild oder spielt nicht. Der Code bringt alle drei mit.
Welche Dateigröße nutzen?
Ein Hintergrundvideo sollte kurz (10 bis 20 Sekunden in Schleife) und leicht sein, am besten unter 3 bis 5 MB, in 720p oder 1080p ohne Audio. Komprimiere vor dem Veröffentlichen; ein schweres Video verzögert das Laden auf dem Handy.
Und wer weniger Bewegung bevorzugt?
Für alle, die im System die Bewegungsreduzierung aktiviert haben, pausiert das Skript das Video und es bleibt nur das Titelbild. Es gibt auch eine Pause-Taste, die WCAG für Inhalte verlangt, die sich länger als 5 Sekunden bewegen.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.