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!!!.
The best way to do this is to have a <div> containing the <video> and your 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.
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?
来源：https://stackoverflow.com/questions/16234740/overlay-on-html5-fullscreen-video