CSS Code Beispiel

Mit CSS ein Hintergrundvideo responsive darstellen

Hintergrundbilder über CSS zu gestalten kann man schon sehr lange. Gerade bei Bilder die z.B. die komplette und Breite und Höhe des Displays in Anspruch nehmen bietet sich die das CSS Attribut cover an.

.background-image {
    background-size: cover;
}

Damit wird das Bild über den kompletten Container gelegt, dass Grössenverhältnis vom Bild wird beibehalten (das Bild wird nicht verzehrt). Falls das Bild nicht passt, wird es entsprechend beschnitten.

Das ganze liefert in 99.9% der Fälle grossartige Ergebnisse und wird auch in allen Browser unterstützt. 

Was ist mit Videos?

Inzwischen hat das Internet einiges mehr zu bieten als langweilige Bildchen darzustellen. Und gerade, dass war ein kleines Problem das heute aufgetaucht ist.

Im Gegensatz zu Bildern können wir Videos nicht als „Background“ einfügen. Aber wir können Videos (Dank HTML5! 😍) direkt einbetten.

Als HTML sieht das in etwa so aus:

<video autoplay muted playsinline loop class="full-video">
    <source src="mein-video.mp4" type="video/mp4">
</video>

Kurz zu den einzelnen Attribute:

  • autoplay: Wird benötigt, damit das Video von selber started.
  • playsinline: Wird von iPhones und iPads benötigt, damit das Video „inline“ und nicht in einem neuen Tab abgespielt wird.
  • loop: Wiederholt das Video, wenn es zu Ende ist.
  • muted: Spielt das das Video ohne Ton ab. Nur Videos ohne Ton sind werden mobilen Geräten (Smartphones, Tablets) automatisch abgespielt.

Nun müssen wir das Video mit CSS dazu bringen in voller Breite und in voller Höhe und responsive dargestellt zu werden.

.full-video {
    width: 100%;
    height: 100vh;
    -o-object-fit: cover;
    object-fit: cover;
}

Die Erklärung für den CSS Code:

  • width: Sollte eigentlich klar sein, das Video soll 100% breit sein.
  • height: Definiert den volle Höhe des Engerätes.
  • object-fit: Ist etwas neueres – und war mir bisher unbekannt – definiert wie ein Objekt (Bild oder Video) gefüllt werden soll. Hier kann man Cover verwenden und erreicht damit den selben Effekt wie bei Bildern. Für ältere Opera Versionen, setzen wir hier noch einen entsprechen Browserpräfix mit „-o-„.

Alles wunderbar?

Leider Nein. Die CSS Eigenschaft „object-fit“ funktioniert in jedem modernen Browser (Firefox, Chrome, Opera, Safari) wunderbar. Microsoft ist hier mal wieder der Spielverderber.

Microsoft Edge unterstützt „object-fit“ nur in Kombination mit Bildern, was für unseren Fall natürlich völlig nutzlos ist.

Und der Internet Explorer (egal welche) Version, kennt die Eigenschaft gar nicht.

Constance – eine grossartige Webentwicklerin aus Seattle hat auf Ihrem GitHub Profil zum Glück ein Polyfill zur Verfügung gestellt, dass diese Funktion für den Internet Explorer und sehr alte Browser Versionen nachrüstet.

WebP - Das unbekannte Bildformat
OS X Mojave - Der Mac in ganz neu 🧐

Noch keine Kommentare

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.