Question

I have a video element in an HTML5 document. There is a control panel div that slides out dynamically to partially cover the video element.

This works fine in Firefox and IE9. However, in Google Chrome, any part of any link that lies over the Video element, is not clickable. The pointer doesn’t change when you mouseover the link, and clicking the link has no effect.

The problem is fixed if I set the Video element to not display controls. But oddly, if the Video element starts with controls enabled, and then I remove the Controls attribute dynamically, the links are unclickable. I’ve tried using both jQuery and regular JavaScript.

At present, I don’t need the controls to be shown, so my page is ok. But I’d like to understand the problem better (plus, if somebody else has the same problem, perhaps this post will help them?). Does naybody know, is there some difference to how Chrome handles the video element, compared to IE9 and FF?

Answer 1

I’ve added z-index to both overlapping elements in your code, and it works for me ok. For example, CSS for first div is changed to:

div.first {
  left: 0;
  top: 0;
  z-index: 255;
}

And first video is changed to:

<video controls style="z-index:0">

I can click the link inside the first div, including that part floating over video element.