So fügen Sie Ihrer Website einen Videohintergrund hinzu

Das Wichtigste in Kürze

• Nutzen Sie ein 6–15 Sekunden langes, stummes MP4 in Schleife mit Poster-Bild.

• Halten Sie es bei wenigen MB: 1080p oder weniger, ohne Audio, Fast Start.

• Fügen Sie ein Overlay für lesbaren Text und eine Pause-Option für die Barrierefreiheit hinzu.

• Beachten Sie prefers-reduced-motion und erwägen Sie auf Mobilgeräten nur ein Poster.

Best Practices für Videohintergründe

• 6–15 Sekunden, nahtlose Schleife.

• Stumm, Autoplay, playsinline.

• Komprimiert (Ziel: einige MB), 1080p oder weniger.

• Ein Poster-Bild für langsame Verbindungen.

• Ein Overlay, damit der Text lesbar bleibt.

HTML und CSS für ein Hintergrundvideo

<section class="hero">
  <video class="bg" autoplay muted loop playsinline poster="poster.jpg">
    <source src="loop.mp4" type="video/mp4">
  </video>
  <div class="content">…</div>
</section>

.hero{position:relative;overflow:hidden}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

In Website-Baukästen

Squarespace: Abschnitt Background → Video. Webflow: Background-Video-Element. Wix: Streifenhintergrund → Video. WordPress-Themes und Elementor: Abschnittshintergrund → Video.

Hintergrundvideo vs. Videogalerie

Eine Hintergrundschleife schafft Stimmung; sie ist nicht für Inhalte gedacht, die man sich ansehen soll. Platzieren Sie sehenswerte Videos in einem Player oder einer Galerie unterhalb des Hero-Bereichs.

Der No-Code-Weg

Fügen Sie unter Ihrem Hero-Bereich eine Videogalerie für die Videos hinzu, die Menschen tatsächlich ansehen sollen.

Elfsight Video Gallery ausprobieren

Barrierefreiheit bei Hintergrundvideos

• Fügen Sie einen Pause-Button für Bewegung in Schleife hinzu.

• Beachten Sie prefers-reduced-motion – zeigen Sie stattdessen das Poster.

• Halten Sie den Textkontrast über jedem Bild lesbar.

@media (prefers-reduced-motion: reduce){
  .bg{display:none}
  .hero{background:url(poster.jpg) center/cover}
}

Überlegungen für Mobilgeräte

Mobile Browser spielen stumme Inline-Videos automatisch ab, doch Datenvolumen und Akku spielen eine Rolle. Erwägen Sie auf kleinen Bildschirmen eine kleinere Datei oder nur das Poster-Bild.

Woher Sie Hintergrund-Footage bekommen

Drehen Sie eigenes Material von Produkt oder Team für Authentizität oder nutzen Sie lizenziertes Stockvideo. Schneiden Sie es zu einer nahtlosen Schleife und entfernen Sie das Audio.

Die Schleife mit ffmpeg kodieren

Exportieren Sie Ihren Clip und erstellen Sie dann ein webtaugliches, stummes MP4 mit Fast Start (damit die Wiedergabe beginnt, bevor es vollständig heruntergeladen ist):

# MP4 (H.264), 1080p wide, no audio, fast start
ffmpeg -i input.mov -an -vf "scale=1920:-2" -c:v libx264 -crf 28 -preset slow -movflags +faststart loop.mp4

# Optional smaller WebM (VP9)
ffmpeg -i input.mov -an -vf "scale=1920:-2" -c:v libvpx-vp9 -crf 38 -b:v 0 loop.webm

# Poster image from the first frame
ffmpeg -i loop.mp4 -frames:v 1 poster.jpg

Erhöhen Sie den CRF-Wert für kleinere Dateien, senken Sie ihn für höhere Qualität. Für einen Hintergrund sind weichere Details in Ordnung – der Text liegt darüber.

Text lesbar halten

.hero{position:relative;isolation:isolate}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.55));z-index:-1}
.hero .bg{z-index:-2}

Ein dunkles Verlaufs-Overlay hält weiße Überschriften über hellen Bildern lesbar. Prüfen Sie den Kontrast an der hellsten Stelle der Schleife.

Performance-Budget

Hintergrundvideo vs. Videobereich

Eine Hintergrundschleife schafft Atmosphäre; niemand schaut sie aufmerksam an. Wenn Menschen wirklich zuschauen sollen – eine Produktdemo, Testimonials, ein Kanal –, geben Sie diesen Videos einen eigenen Bereich mit Player, in dem sie alles mit Ton sehen können.