Question

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!

Answer 1

You can simply hide the controls using a bit of javascript/jQuery:

$('video').prop('controls',false);

Works a treat.