Link block does not work when z-index is not setup

Hi there,

I have successfuly wrote a tiny javascript snipet to pause and play an HTML5 video on mouseover respectively mouseout events. Everything works fine until I decide to add a webflow interraction on top of that video element.

The interraction is nothing else than a show/hide animation of a div being absolute positioned on top of that video element.

It is usefull to know that the video element has a z-index of 1 and the hover div a z-index of 2. With those z-indexes setup, the play/pause function does not work anymore as if the script only “sees” the mouseover function of the hover div and not the mouseover function of the video element below.

However, when I remove those z-indexes, everything works as expected… except the link block (hover div) does not link anywhere anymore.

I know I could add an “onclick” listener inside the video element but this is not practical for my client since he is scared to touch code… and would prefer set up the link via webfow designer using the hover div…

Thank you for your help :face_with_monocle:
Have a nice weekend !

The live simplified website:
https://mp4test2.webflow.io/
(only the video that does not have a hover effect plays/pauses… the other one keeps on playing when it should pause on hover)

My read-only link:
https://preview.webflow.com/preview/mp4test2?utm_source=mp4test2&preview=a063e8e9260660c03b815002d7e7ab75