Embedded Video Z-Index Issue

I’m having what I suspect is a Z-Index issue getting embedded video to play on my site. I have a full-width site border with a fixed position that needs to have the highest z-index on my page. This breaks the play button of my embedded video from Vimeo. If I increase the z-index of the embedded videos, the frame goes over the border when scrolling.

Is there a way to play video without losing the border element or having the video element overlap it? I solved this issue for my hover states on static images with empty divs and interactions that don’t show on top of the site border. Is there a way to do the same thing to get video to play on my site?

Any help would be much appreciated. Thanks.

https://preview.webflow.com/preview/blank-site1406035256317054255?preview=3b64e8a0bb9f97f210f409c134b3d07c

Maybe use separate divs for each side of the boarder? This way you wont have an element that covers the whole screen.

1 Like

Solved! Creating separate divs did the trick. Thanks.

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.