Website mit Video-Hintergrund: Gewicht, Autoplay und Zugang

Auf einer Website mit Video-Hintergrund läuft ein stummes Video in Schleife hinter einem Abschnitt, meist dem Hero, während Überschrift und Buttons darüber liegen. Gut gemacht ist es leicht, ruhig und optional: Es startet lautlos von selbst, zeigt ein fertiges Standbild, bevor es lädt, pausiert für Menschen, die weniger Bewegung bevorzugen, und macht die Wörter nie schwerer lesbar. Schlecht gemacht ist es das schwerste und ablenkendste Element der Seite.

Wann sich ein Video-Hintergrund lohnt

Ein Video-Hintergrund verdient seinen Platz, wenn die Bewegung die Botschaft ist: Wasser für eine Schwimmschule, Dampf für eine Kaffeerösterei, ein langsam treibendes Material für eine Marke, deren Look ihre Identität ist. Ist die Bewegung nur Dekoration, sieht eine leichtere Option meist genauso gut aus. Vergleiche die Möglichkeiten, bevor du dich festlegst.

Das HTML für ein Hintergrundvideo

Vier Attribute erledigen die wesentliche Arbeit. muted erlaubt dem Browser das Autoplay, denn Browser blockieren Autoplay mit Ton in der Regel. playsinline verhindert, dass ein iPhone es im Vollbild öffnet. loop wiederholt es, und poster zeigt ein Standbild, während es lädt. Weil es dekorativ ist, verbirg es vor Screenreadern.

<section class="hero">
  <video class="hero-video" autoplay muted loop playsinline
         poster="/media/hero-poster.jpg" aria-hidden="true">
    <source src="/media/hero.webm" type="video/webm">
    <source src="/media/hero.mp4" type="video/mp4">
  </video>

  <div class="hero-content">
    <h1>Colour that moves with you</h1>
    <button class="hero-pause" type="button">Pause background</button>
  </div>
</section>

.hero {
  position: relative;
  min-height: 80vh;
  overflow: hidden;
  background: #120a2e; /* shows before the poster arrives */
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills any shape without stretching */
}
.hero-content {
  position: relative; /* sits above the video */
}

Der Leitfaden von MDN zum Video-Element listet jedes Attribut auf. Denk daran, dass Autoplay eine Bitte ist, keine Garantie: Manche Smartphones im Energiesparmodus spielen es nicht ab. Deshalb muss das Posterbild für sich allein wie ein fertiges Design aussehen.

Die Videodatei leicht halten

Video ist auf jeder Seite, die eines hat, meist die größte Datei. Weiches, langsames Material lässt sich viel besser komprimieren als scharfes, unruhiges, also ist die Gestaltungsentscheidung auch eine Leistungsentscheidung. Halte den Loop kurz, etwa 8 bis 15 Sekunden, entferne die Tonspur ganz und liefere keine größere Auflösung aus, als der Hero je anzeigt. Setz dir vor dem Export ein Größenbudget und prüfe das echte Ergebnis im Netzwerk-Tab deines Browsers.

# MP4 (H.264): silent, web-ready, starts playing before it fully downloads
ffmpeg -i hero-master.mov -an -c:v libx264 -crf 26 -preset slow \
  -pix_fmt yuv420p -movflags +faststart -vf "scale=1920:-2" hero.mp4

# WebM (VP9): often smaller at similar quality
ffmpeg -i hero-master.mov -an -c:v libvpx-vp9 -crf 36 -b:v 0 \
  -vf "scale=1920:-2" hero.webm

# Poster: the first frame as a JPEG
ffmpeg -i hero.mp4 -frames:v 1 -q:v 3 hero-poster.jpg

Website-Hero 1920 × 1080

1920 × 1080

Smartphone-Zuschnitt

1080 × 1920

Reduzierte Bewegung und ein Pause-Button

Manche Besucher stellen ihr Gerät auf reduzierte Bewegung, weil ihnen Bewegung Schwindel oder Unwohlsein bereitet. Respektiere das, indem du statt des Videos das Posterbild zeigst. Unabhängig davon verlangt das WCAG-Kriterium Pausieren, Stoppen, Ausblenden, dass bewegte Inhalte, die automatisch starten und neben anderen Inhalten länger als fünf Sekunden laufen, pausiert werden können. Ein kleiner, sichtbarer Pause-Button deckt das ab.

const video = document.querySelector('.hero-video')
const button = document.querySelector('.hero-pause')
const reduce = matchMedia('(prefers-reduced-motion: reduce)')

function follow() {
  if (reduce.matches) video.pause()
  else video.play().catch(() => {}) // the browser may still refuse
}
reduce.addEventListener('change', follow)
follow()

button.addEventListener('click', () => {
  if (video.paused) {
    video.play()
    button.textContent = 'Pause background'
  } else {
    video.pause()
    button.textContent = 'Play background'
  }
})

Reduzierte Bewegung erklärt die Einstellung und was du sonst noch reduzieren solltest.

Lesbarer Text über einem Video-Hintergrund

Text über Video muss vor jedem Einzelbild lesbar sein, nicht nur vor dem Posterbild. Die übliche Lösung ist eine dunkle Überlagerung über dem ganzen Video, die funktioniert, es aber flach macht. Bessere Wege: Wähle ruhiges Material mit einer stillen Zone, wo die Wörter stehen, halte die hellste Bewegung von der Überschrift fern und nutze eine große, kräftige Stärke. Unser Leitfaden zu Text auf Bildern hat sieben Techniken, die genauso für Video gelten.

Checkliste für Video-Hintergründe

1. 1

   Entscheiden, dass es Video sein muss

   Echte Aufnahmen oder Bewegung, die überall identisch aussehen muss. Sonst erwäge CSS oder einen Shader.

2. 2

   Kurz, langsam und stumm halten

   8 bis 15 Sekunden, keine Tonspur, ein Loop, der nahtlos schließt.

3. 3

   Zwei Formate und ein Posterbild exportieren

   WebM und MP4, nicht größer als die Anzeigegröße, plus ein erstes Einzelbild als Standbild.

4. 4

   Die vier Attribute nutzen

   autoplay, muted, loop, playsinline, mit poster und aria-hidden.

5. 5

   Bewegungseinstellungen respektieren

   Zeige bei reduzierter Bewegung das Posterbild und füge einen Pause-Button hinzu.

6. 6

   Auf einem echten Smartphone testen

   Prüfe Ladezeit über mobile Daten, den Energiesparmodus und den hohen Zuschnitt.

Zur Gestaltung des Heros selbst siehe Hero-Hintergründe für Websites. Ist dein bewegter Hintergrund ein Mark von Gradiently, kannst du ihn als MP4-Loop bis 1080p exportieren und genau so einsetzen.