Overlay on HTML5 Fullscreen Video

Question

I want to add overlay hotspots on a html5 video which will help me give info about that video. I was able to successfully add it on HTML5 Video's normal mode. But, when i change the video mode to fullscreen, it disappears. Want someone to help me please!!!.

Answer 1

The best way to do this is to have a <div> containing the <video> and hotspots, and request fullscreen on the containing <div>.

I implemented the fullscreen and (parts of the) <video> APIs in Firefox. This z-index hack isn't the specified behaviour, so it will stop working once we update our implementation to match the latest draft of the W3C fullscreen spec.

Answer 2

This can be solved with a trick. Have a look on this example here: http://jsfiddle.net/carmijoon/pZbkX/show/

z-index: 2147483647;

You can also see the code here: http://jsfiddle.net/carmijoon/pZbkX/

z-index: 2147483647; 

you need to add maximum value of z-index which is (z-index: 2147483647;) in to the overlay element. That trick will solve your issue.

Can you also share your file on jsfiddle?