Contao 4.4: »Hintergrundvideo« verdeckt immer die Vordergrundobjekte

Hallo zusammen,

ich bin gerade mal wieder am (ver)zweifeln:
Ich möchte eine Seite haben, auf der ich ein Video im Hintergrund abspielen lasse und im Vordergrund einige Buttons plazieren möchte, so wie hier.

Aber leider wird bei mir immer das Video in den Vordergrund gestellt, die Schrift und Buttons sind immer verdeckt.
Ich habe nun sogar einfach nur den Code aus dem Beispiel in ein html-Inhaltselement kopiert und die CSS in eine komplett blanke Datei. Nichts!
Ich kann bei z-index -100000 für das Video eintragen, keine Änderungen.

Eingebunden habe ich die Bootstrap-Komponenten so in das Seitenlayout:
Anhang 22988
Anhang 22989

Ich weiß echt nicht mehr weiter, bin seit Stunden dran, ohne dass sich was ändert.
Verzweifelte Grüße

Hat keiner eine Idee, was da schief läut?
Es ist doch komisch, das selbst dann der Fehler auftritt, wenn ich die Html Daten und die css einfach nur kopiere...

Dann werde ich mich wohl vom Video auf der Startpage verabschieden müssen, hoffenlich kappt das mit einem Bild...

Hallo, die Klasse .mejs__container braucht die style Anweisungen aus dem Beispiel:

Code:

---

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

---

dann gehts!

Zitat:

---

Zitat von swinde

Hallo, die Klasse .mejs__container braucht die style Anweisungen aus dem Beispiel:

Code:

---

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

---

dann gehts!

---

Nee, leider auch nicht...
Aber lasst es, ich habe beschlossen, dass das mit dem Video keine gute Idee ist, ein einzelne Bild ist besser und weniger verspielt.
Danke aber natürlich trotzdem!

Ich hatte es gerade so unter https://cocktails-collection.com/landingpage.html nachgestellt! Funktionierte auf Anhieb!

Zitat:

---

Zitat von swinde

Ich hatte es gerade so unter nachgestellt! Funktionierte auf Anhieb!

---

Ich habe es in die CSS geschrieben und hatte sich nichts geändert.
Aber trotzdem danke, auch wenn ich mich nun gegen das Video entschieden habe.

Poste einen Link zur Seite.

Zitat:

---

Zitat von Spooky

Poste einen Link zur Seite.

---

Hallo Sooky,
ich möchte nicht, dass Google schon indexiert, daher habe ich das Verzeichnis geschützt.
Die Seite findest Du hier, als Passwort und User habe ich mal »contao« eingetragen. Ich hoffe, dass hält alle bots ab... ;o))

CSS sieht jetzt so aus:

Code:

---

header {
  position: relative;
  background-color: black;
  height: 75vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

.mejs__container {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}


/*header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}*/

header .container {
  position: relative;
  z-index: 2;
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

@media (pointer: coarse) and (hover: none) {
  header {
    background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
  }
  header video {
    display: none;
  }
}

---

Wie gesagt, habe den Code komplett kopiert und auf in die CSS-Datei gestellt.

Naja und was genau passt da jetzt nicht? Sieht ja alles ok aus.

Zitat:

---

Zitat von Spooky

Naja und was genau passt da jetzt nicht? Sieht ja alles ok aus.

---

Das kann doch nicht...
Als ich die Seite für das Forum freigegeben habe, da funktionierte es nicht: Der Text war vom Video verdeckt...
Na ja, nun passt es ja...