33 geniale Contao-Erweiterungen, die du kennen solltest! - Contao Academy
Ergebnis 1 bis 10 von 10

Thema: Contao 4.4: »Hintergrundvideo« verdeckt immer die Vordergrundobjekte

  1. #1
    Contao-Fan
    Registriert seit
    05.11.2012.
    Beiträge
    322

    Standard 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:
    Bildschirmfoto1.jpg
    Bildschirmfoto2.jpg

    Ich weiß echt nicht mehr weiter, bin seit Stunden dran, ohne dass sich was ändert.
    Verzweifelte Grüße
    Geändert von Jan-Dirk (30.11.2019 um 11:55 Uhr)

  2. #2
    Contao-Fan
    Registriert seit
    05.11.2012.
    Beiträge
    322

    Standard

    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...

  3. #3
    Contao-Fan
    Registriert seit
    05.11.2009.
    Ort
    Liebschützberg (Sachsen)
    Beiträge
    452

    Standard

    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!

  4. #4
    Contao-Fan
    Registriert seit
    05.11.2012.
    Beiträge
    322

    Standard

    Zitat Zitat von swinde Beitrag anzeigen
    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!

  5. #5
    Contao-Fan
    Registriert seit
    05.11.2009.
    Ort
    Liebschützberg (Sachsen)
    Beiträge
    452

    Standard

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

  6. #6
    Contao-Fan
    Registriert seit
    05.11.2012.
    Beiträge
    322

    Standard

    Zitat Zitat von swinde Beitrag anzeigen
    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.

  7. #7
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    21.947
    Partner-ID
    10107
    User beschenken
    Wunschliste

    Standard

    Poste einen Link zur Seite.

  8. #8
    Contao-Fan
    Registriert seit
    05.11.2012.
    Beiträge
    322

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    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.
    Geändert von Jan-Dirk (30.11.2019 um 15:07 Uhr)

  9. #9
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    21.947
    Partner-ID
    10107
    User beschenken
    Wunschliste

    Standard

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

  10. #10
    Contao-Fan
    Registriert seit
    05.11.2012.
    Beiträge
    322

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    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...

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •