Wie kann ich ein div hinter einem Videoelement verbergen?

Question

Ich habe ein Video über einem div Hintergrund platziert, das Video hat einen schwarzen Hintergrund und für den Videohintergrund nicht sichtbar zu sein, habe ich Mix-Blend-Modus: Bildschirm verwendet.

Alles funktioniert bis jetzt gut. Das Problem ist, wenn ein anderes Element hinter dem Video steht (onclick animation), aber dieses Element immer noch sichtbar ist, da der Mischmodus des Videos ein Bildschirm ist.

Gibt es eine Möglichkeit, das zweite Div zu verstecken, wenn es hinter dem Video ist?

video { 
    position: absolute; 
    margin-top: 0px; 
    margin-left: 50px; 
mix-blend-mode: screen; 
    pointer-events:none; 
}` 

Dies ist der Hintergrund (weiß nicht, ob es releveant oder nicht ist)

.background{ 
background-color: #7a7f83; 
} 

Die Farbe des zweiten div ist hell (gelb, blau, etc)

bearbeiten : Hier ist die kürzere Version. Betrachte 2 Divs und ein Video. ein div ist Hintergrund und einer ist ein Rechteck. Ich möchte Video über beide divs platzieren, und ich habe den Videomischmodus auf dem Bildschirm gehalten. Nun, wie Sie vielleicht wissen, ist, da der Videomischmodus Bildschirm ist, alles hinter dem Video sichtbar. Ich möchte das Hintergrund-Div sichtbar sein, aber nicht das Rechteck div. Gibt es eine Möglichkeit, den Teil des Rechtecks ​​div, der sich hinter dem Video befindet, zu verbergen?

Answer 1

Beispiel # 1

Stellen Platz Klasse Position zur absoluten und parent (Hintergrund) Position in die relativ.

.square{background-color: red;width: 100px;height: 100px;position: absolute; top: 50%; left: 50%;} 
.background{position: relative;} 

und Ihr Video ist im Hintergrund Klassenelement. wie folgt:

Wenn Sie den Z-Index für Video-Tags verwenden, muss Ihr quadratischer Z-Index höher sein.

Ergebnis:

und danach Wenn Sie den Platz wollen verstecken, es nur auf die Anzeige ändern: none; und wenn Sie es brauchen, um anzuzeigen, ändern Sie es zur Anzeige: Block;

Beispiel # 2

tun, was Sie in Beispiel # 1 tat, aber Sie müssen Ihre HTML wie folgt ändern:

<div class="main"> 
    <div class="square">SQUARE CLASS</div> 
    <div class="background"> 
     <video>...</video> 
    </div> 
</div> 

und Haupt muss Klasse Position relativ sein. genau wie Hintergrundklasse.

Ergebnis: