Es gibt eine Webdesign Technologie die ich LIEBE und zwar die Möglichkeit ein Video als Hintergrund einzubauen. Damit kann man nämlich eine Firma / Produkt sofort schön darstellen – Bilder sagen mehr als tausend Worte.

Leider ist es nicht so einfach eine saubere Lösung dafür zu finden, die auf allen Geräte sauber läuft (unterschiedliche Breite und Höhe der Geräte) und auch mit verschiedenen CMS sauber funktioniert.

Ich selbst habe lange gebraucht, bis ich ein Code gefunden habe – der sauber läuft und auch in Divi und Elementor funktioniert.

Heute zeige ich euch wie das Ganze funktioniert.

Video

Vorbereitung

Zuerst braucht ihr natürlich ein Video das sich für sowas eignet – also es sollte nicht zu gross sein – max 1-2mb. Denn je mehr das Video zuerst Daten laden muss, desto mehr Zeit braucht die Webseite um zu laden. Ich weiss das ist immer ein grosser Schmerz wenn man Länge für Grösse und Qualität opfern muss.

Ich empfehle eigentlich immer ein 1080p oder 720p mit so max 1-3mb.

Video

1

<video src="https://die-url-zum-video.mp4" autoplay muted playsinline loop></video>

CSS

1
2
3
4
5
6
7
8
9
10
11
12

<style>video {
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
}
</style>