I am creating a simple web app. There is a <video> element on the page. There is a login form that when opened overlays the entire screen, but if you are on the page with the video regardless of z-index or visibility: hidden; the video controls are on top of the overlay.
Well... They are below visually, but the hit areas are above, so you can't interact with the login form.
I have managed to solve this using display: none; on the <video> tag when the form opens (this is also what I tried with visibility: hidden; which didn't work) but it is not ideal as the page underneath shifts about quite a bit.
Has anyone had this issue and found a good way around it?
Thanks :)
As I was typing this, I figured it out. I imagine it's an issue other people will have, so I've answered it below. Nice and simple!