Sie landen auf einer Website, und das Erste, was Sie sehen, ist kein statisches Bild, sondern ein lebendiges, atmendes Video, das den gesamten Bildschirm ausfüllt. Es sieht hochwertig aus. Es sieht professionell aus. Und vor allem funktioniert es auf jedem Gerät, vom Smartphone bis zum Ultrawide-Monitor, ohne einen einzigen schwarzen Balken.

Sie denken vielleicht, dass so etwas JavaScript, Viewport-Messungen und komplexe Berechnungen erfordert. Das dachte ich auch, als ich diese Aufgabe zum ersten Mal anging. Ich probierte calc(), Viewport-Einheiten und schrieb sogar ein Resize-Skript. Es funktionierte in Firefox, ging in Chrome kaputt und blieb in Safari völlig stumm.

Dann stellte sich heraus, dass CSS bereits seit mehreren Jahren eine Eigenschaft hat, die genau das tut, was wir brauchen, und zwar ohne eine einzige Zeile JS. Und heute zeige ich Ihnen, wie Sie einen vollständig responsiven Videohintergrund erstellen, der sich wie background-size: cover verhält, aber für Live-Video.

💡 Kurzer Überblick:

• Positionieren Sie das Video-Element mit fester Positionierung über den gesamten Viewport
• Wenden Sie object-fit cover an, das Video passt sich automatisch an, indem es den Überschuss abschneidet und die Mitte beibehält
• Halten Sie für ältere Browser einen Fallback mit Media Queries und einem „überdimensionierten Container" bereit
• Verpacken Sie alles in einen Container, nützlich für Overlays, Schaltflächen und Text über dem Video
• Passen Sie es für Mobilgeräte an: andere Quelle, playsinline und ein Fallback-Bild

Grundlegender Ansatz: feste Positionierung

Jeder Videohintergrund beginnt damit, dass das <video> den gesamten sichtbaren Bereich einnimmt. Dies geschieht durch position: fixed mit Null-Offsets:

1
#myvid {
2
  position: fixed;
3
  top: 0;
4
  right: 0;
5
  bottom: 0;
6
  left: 0;
7
}

Das Element dehnt sich exakt auf die Breite und Höhe des Viewports aus. Das Problem tritt sofort auf: Video wird fast immer im Seitenverhältnis 16:9 aufgenommen, aber der Bildschirm des Nutzers kann quadratisch, ultrawide oder im Hochformat sein. Das Ergebnis sind diese schwarzen Balken, die den gesamten Effekt ruinieren.

Wenn Sie mit Hintergrundbildern in CSS gearbeitet haben, wissen Sie, dass background-size einen cover-Wert hat. Er zwingt das Bild, den Container vollständig auszufüllen, wobei der Überschuss unter Beibehaltung der Proportionen abgeschnitten wird. Wir brauchen exakt dasselbe Verhalten vom Video. Und es existiert.

Moderne Lösung: object-fit: cover

Die Eigenschaft object-fit wurde genau dafür geschaffen. Sie bestimmt, wie ein ersetztes Element (Bild oder Video) in seinen Container passt, und der Wert cover funktioniert genau wie background-size: cover:

1
#myvid {
2
  position: fixed;
3
  top: 0;
4
  right: 0;
5
  bottom: 0;
6
  left: 0;
7
  width: 100%;
8
  height: 100%;
9
  object-fit: cover;
10
}

Das Video skaliert, um den Container vollständig auszufüllen. Wenn die Proportionen nicht übereinstimmen, schneidet der Browser den Überschuss oben und unten (oder links und rechts) ab und zentriert das Ergebnis automatisch. Keine schwarzen Balken.

Stand 2026 wird object-fit von 96,39% der Browser weltweit unterstützt (Daten von Can I Use). Chrome ab Version 32, Firefox ab 36, Safari ab 10, Edge ab 79. Internet Explorer 11 unterstützt es nicht, aber sein Marktanteil geht gegen null und sein Support-Zeitraum ist beendet.

Für die allermeisten Projekte reichen diese drei CSS-Zeilen aus. Der Videohintergrund ist fertig.

Skalierungsprobleme: was „unter der Haube" passiert

Selbst wenn Sie object-fit verwenden, ist es nützlich, die Mechanik zu verstehen. Zwei Szenarien sind möglich:

Erste Situation: Der Viewport ist breiter als das Video (Bildschirm-Seitenverhältnis größer als 16:9). Das Video dehnt sich in der Breite aus, um den gesamten verfügbaren Bereich auszufüllen, aber seine Höhe wird größer als die Bildschirmhöhe, sodass Inhalte oben und unten abgeschnitten werden. Der Beschnittbereich wird automatisch zentriert.

Zweite Situation: Der Viewport ist schmaler (Seitenverhältnis kleiner als 16:9, zum Beispiel Hochformat auf einem Tablet). Das Video dehnt sich in der Höhe aus, um den gesamten verfügbaren Bereich auszufüllen, die Breite übersteigt den Viewport, der Beschnitt erfolgt links und rechts, und die Mitte bleibt erhalten.

object-fit: cover bewältigt beide Szenarien von selbst. Aber wenn Sie aus irgendeinem Grund ohne diese Eigenschaft arbeiten, ist der nächste Abschnitt für Sie.

Klassischer Trick mit einem „überdimensionierten Container"

Bevor object-fit zum Standard wurde, nutzten Entwickler eine clevere Technik. Die Idee: Machen Sie den Container bewusst größer als sowohl das Video als auch den Viewport, und der Browser zentriert den Inhalt automatisch.

In der Praxis sieht das so aus:

1
#myvid {
2
  position: fixed;
3
  top: 0;
4
  left: 0;
5
  width: 100%;
6
  height: 100%;
7
}
8
 
9
@media (min-aspect-ratio: 16/9) {
10
  #myvid {
11
    height: 300%;
12
    top: -100%;
13
  }
14
}
15
 
16
@media (max-aspect-ratio: 16/9) {
17
  #myvid {
18
    width: 300%;
19
    left: -100%;
20
  }
21
}

Media Queries bestimmen, welche Achse überläuft, und legen eine Größe fest, die ein Vielfaches des Viewports beträgt, mit einem negativen Offset für die Zentrierung. Das Video ist am Ende um ein Vielfaches größer als der sichtbare Bereich, und der Browser schneidet es zu und zentriert es mit dem Standardmechanismus für ersetzte Elemente.

Heute ist dieser Code eher ein Sicherheitsnetz für Legacy-Projekte. Aber wenn Sie eine Website pflegen, auf der object-fit aus irgendeinem Grund nicht verfügbar ist, funktioniert der Trick zuverlässig.

Produktionscode: alles zusammenfügen

In einem echten Projekt existiert ein Videohintergrund selten für sich allein. Darüber liegen eine Überschrift, eine Schaltfläche, ein Formular, ein Overlay für die Lesbarkeit des Textes. Deshalb wird das Video in einen Container verpackt, der die Viewport-Dimensionen beibehält:

1
#SDStudio_VIDEO_BACKGROUND {
2
  position: fixed;
3
  top: 0;
4
  right: 0;
5
  bottom: 0;
6
  left: 0;
7
  overflow: hidden;
8
}
9
 
10
#SDStudio_VIDEO_BACKGROUND > video {
11
  position: absolute;
12
  top: 0;
13
  left: 0;
14
  width: 100%;
15
  height: 100%;
16
}
17
 
18
/* Fallback: if object-fit is not supported */
19
@media (min-aspect-ratio: 16/9) {
20
  #SDStudio_VIDEO_BACKGROUND > video {
21
    height: 300%;
22
    top: -100%;
23
  }
24
}
25
 
26
@media (max-aspect-ratio: 16/9) {
27
  #SDStudio_VIDEO_BACKGROUND > video {
28
    width: 300%;
29
    left: -100%;
30
  }
31
}
32
 
33
/* Override if object-fit is available */
34
@supports (object-fit: cover) {
35
  #SDStudio_VIDEO_BACKGROUND > video {
36
    top: 0;
37
    left: 0;
38
    width: 100%;
39
    height: 100%;
40
    object-fit: cover;
41
  }
42
}

Die @supports-Direktive prüft die Unterstützung von object-fit und überschreibt die Fallback-Regeln. Ein moderner Browser erhält die saubere Drei-Zeilen-Lösung. Ein veralteter funktioniert über Media Queries und den überdimensionierten Container.

Das Markup ist minimal:

1
<div id="SDStudio_VIDEO_BACKGROUND">
2
  <video autoplay muted loop playsinline>
3
    <source type="video/mp4" src="myvid.mp4"
4
            media="(orientation: landscape)">
5
    <source type="video/webm" src="myvid.webm"
6
            media="(orientation: landscape)">
7
    <source type="video/mp4" src="myvid_square.mp4"
8
            media="(orientation: portrait)">
9
    <source type="video/webm" src="myvid_square.webm"
10
            media="(orientation: portrait)">
11
  </video>
12
</div>

Ein paar Details, die man leicht übersehen kann. muted ist zwingend erforderlich: Browser blockieren Autoplay mit Ton. playsinline verhindert, dass iOS das Video in den Vollbildmodus ausdehnt. Dass Sie loop benötigen, muss ich wohl nicht erwähnen, ein Videohintergrund ohne Schleife wirkt wie ein Fehler. Außerdem: Stellen Sie eine quadratische Quelle für das Hochformat über media="(orientation: portrait)" bereit. Ein Standard-16:9-Clip auf einem vertikalen Bildschirm wird fast vollständig beschnitten und zu sinnlosem Flackern.

⁉️🤔 Häufig gestellte Fragen

Muss es speziell ein <video> sein, oder kann ich ein YouTube-Video als Hintergrund einstellen?

Sie können einen YouTube-Iframe als Hintergrund verwenden, aber mit Einschränkungen. Sie verlieren die Kontrolle über die Pufferung, können keine Interface-Elemente entfernen und mobile Browser blockieren oft das Iframe-Autoplay. Für Hintergründe ist ein selbst gehostetes <video> immer vorzuziehen. Wenn Sie YouTube einbetten, fügen Sie die Parameter ?autoplay=1&mute=1&controls=0&loop=1&playlist=VIDEO_ID hinzu.

Welches Videoformat sollte ich für maximale Kompatibilität wählen?

Die Kombination aus MP4 (H.264) + WebM (VP8/VP9) deckt alle modernen Browser ab. MP4 ist das primäre Format, WebM ist für Chrome und Firefox (geringere Größe bei gleicher Qualität). Auflösung für Hintergründe: Full HD ist ausreichend. Höhere Auflösungen liefern Qualitätsgewinne, die im Hintergrund nicht wahrnehmbar sind, während die Dateigröße quadratisch wächst. Halten Sie Videos für schnelles Laden im Bereich weniger Megabyte.

Was sollte ich Nutzern zeigen, während das Video lädt?

Setzen Sie poster auf dem <video>, entweder ein statisches erstes Bild oder ein speziell vorbereitetes Bild. CSS-Fallback: background-image auf dem Container, das object-fit nicht abdeckt (es sitzt auf einer Ebene darunter). Für mobile Nutzer mit langsamen Verbindungen ist es besser, den Videohintergrund gar nicht erst zu laden. Verwenden Sie die Media Query prefers-reduced-data und ersetzen Sie ihn durch ein statisches Bild.

Wie mache ich Text über dem Video lesbar?

Fügen Sie ein halbtransparentes Overlay zwischen Video und Inhalt ein: background: rgba(0, 0, 0, 0.4) auf einem ::after-Pseudoelement des Containers mit position: absolute; inset: 0; z-index: 1. Der Inhalt selbst erhält z-index: 2; position: relative. Wählen Sie den Abdunklungskoeffizienten basierend auf dem konkreten Video: helleres Material braucht mehr, dunkleres weniger.

Funktioniert das auf iOS und Android?

Ja, mit Einschränkungen. iOS erfordert playsinline (andernfalls geht das Video in einen Vollbild-Player). Auf iOS Safari-Versionen vor 10 wird object-fit nicht unterstützt, daher greift der Fallback aus dem obigen Produktionscode. Android Chrome funktioniert korrekt. Auf beiden Plattformen startet das Video nur nach der ersten Nutzerinteraktion, wenn muted nicht gesetzt ist, daher ist muted zwingend erforderlich.

Was Sie in Ihrem Projekt verwenden sollten: das kurze Fazit

Wenn Sie 2026 eine Website erstellen, verwenden Sie object-fit: cover. Drei Zeilen CSS, kein JavaScript, volle Responsivität direkt einsatzbereit. Die Browser-Unterstützung ist nahezu universell und die Abdeckung wächst jeden Monat.

Wenn Sie ein Legacy-Projekt mit zwingender Unterstützung für altes Edge (vor 79) oder Firefox (vor 36) haben, bietet Ihnen der Produktionscode aus dem obigen Abschnitt beide Welten: @supports aktiviert die moderne Lösung, während Media Queries den Rest abfangen.

Und denken Sie daran: Ein Videohintergrund ist das Sahnehäubchen. Wenn der Clip 20 Megabyte wiegt und acht Sekunden zum Laden braucht, ist der Nutzer weg, bevor er Ihre schöne Überschrift sieht. Komprimieren Sie, testen Sie mit mobilen Geschwindigkeiten und stellen Sie immer einen statischen Fallback bereit.

Auf einen großartigen Hintergrund.