No matter how we style to get an element like a DIV on top of the HTML5 video in full screen mode, it does not appear until we use a trick!

The first time I needed to put a description bar on top of a HTML5 video, it did not work on full screen mode. I searched a lot and realised this is a common issue without any proper answer. So I started to play with z-index. I order to make sure it will be on top of everything, I put z-index: 999999999999;. Suddenly it has worked on FireFox! I found Firefox changed that large number to z-index: 2147483647;!

Yes! That was the trick! For any reason we need to use the maximum number of z-index and that will work in all browsers!
z-index: 2147483647;

Here is the Demo:

This is an element overlay on top of the fullscreen HTML5 video!

You can also find the JSFiddle Demo here!