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
Have a nice weekend !
The live simplified website:
(only the video that does not have a hover effect plays/pauses… the other one keeps on playing when it should pause on hover)