Größe herausfinden von Div mit geringeren z-index

iandarfdas · 22.02.2022

Schönen guten Abend zusammen,

ich habe folgendes Problem:
Auf meiner Website habe ich ein Video welches in den Hintergrund rückt, also z-index: -1.
Logischerweise kommt unter dem Video Text. Damit der Text nicht nach ganz oben rutscht habe ich ein
placeholder-DIV um das Video gelegt. Nun hätte ich gerne, dass die Höhe vom Placeholder immer die Höhe vom
Video ist.
Gibt es vielleicht die Möglichkeit mit JS immer die Höhe vom placeholder neu zu definieren/skalieren?

Die Höhe vom Video ist auf "auto" aus reinen responsiven Zwecken.
Momentan habe ich die Höhe vom placeholder auf 100%, aber das sieht natürlich auf der mobilen Version besch**** aus.

Video ^= #opener
placeholder ^= #placeholder

CSS:

#opener {
  width: 100%;
  height: auto;
  margin: 10vh auto;
  z-index: -1;
  position: fixed;
  left: 0%;
}

#placeholder {
  width: 100%;
  height: 100%;
}

HTML:

        <div id="placeholder" attr-scroll="false">
                <video id="opener" autoplay muted loop>
                    <source src="opener.mov">  
                </video>
        </div>

Vielen Dank im Voraus.

Mit freundlichen Grüßen
Ian Kulick

Sempervivum · 23.02.2022

Damit der Text nicht nach ganz oben rutscht

Das kannst Du erreichen, indem Du statt position:fixed; position:sticky; benutzt. Das placeholde-Div brauchst Du dann nicht.
Edit: Allerdings verstehe ich nicht, was Du mit dem negativen z-index erreichen willst?

iandarfdas · 23.02.2022

Vielen Dank für die Antwort. Ich möchte, dass sich der Text beim scrollen so zu sagen über das Video zieht, dafür
muss das Video in den Hintergrund mit negativen z-index. Da das Video dann eine Ebene tiefer ist, als der Text von der Website, rutscht dieser natürlich nach ganz oben und mit position:fixed bleibt der Text dann einfach über dem Video.

iandarfdas · 23.02.2022

Also ich habe eine Lösung gefunden die für mich funktioniert. Mit JavaScript:

Und zwar hol ich mir einfach die aktuelle Höhe vom Video und pack diese als neue Höhe für meinen placeholder.
Ziemlich simpel eigentlich. lol

Javascript:

const h = document.querySelector("#opener").clientHeight+130;
ph.style.height = h+"px";
window.addEventListener('resize', () => {
    const h1 = document.querySelector("#opener").clientHeight + 130;
    ph.style.height = h1+"px";
})

wichtig ist der eventlistener, weil sich die Höhe vom Video so zu sagen nur ändert wenn das Fenster eine neue höhe bzw breite bekommt.
des Weiteren wer es nicht wusste:
Ein Attribut was eine integer oder float (whatever) bekommt, in dem fall die höhe brauch immer noch die Einheit dahinter.
Es funktioniert nicht:
[...].style.height = 100;
sondern:
[...].style.height = 100+"px";

dürfte mit %,em etc. auch funktionieren

danke für die Antwort und vllt konnte ich ja noch jemanden helfen

Sempervivum · 23.02.2022

Es geht jedoch auch nur mit CSS, wie oben schon geschrieben mit position: sticky;.

CSS:

        video {
            position: sticky;
            top: 0;
            z-index: -1;
            width: 100%;
        }

HTML:

<body>
    <video src="videos/test.mp4"></video>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing

    hier dann viel mehr Text ...

iandarfdas · 23.02.2022

Bei mir funktioniert es leider nicht, kann aber auch sein, dass ich dafür zu wenig mein Problem erläutert habe.
Vielen Dank trotzdem.