How do I make a DIV visible on top of an HTML5 fullscreen video?

Question

My ultimate goal right now is to have a link appear on top of video when the video has reached the end. Using the JW Players functionality I have determined how to have the link

Answer 1

I've set up a small demo, I'm using an HTML5 video, not a Flash Player, but the behaviour should be the same: http://jsfiddle.net/sandro_paganotti/TcpX5/

To toggle fullscreen I suggest using screenfull (https://github.com/sindresorhus/screenfull.js) that basically handles the small differences between Firefox and Chrome.

Here's the code, just substitute the <video> element with your JW Player implementation:

HTML

<div id="video">
    <video width="100%" src="yourmovie.webm" controls></video><br/>
    <button>go full screen</button>
    <a href="#">Special link</a>
</div>

CSS

#video{ position: relative; }
a{  position: absolute; top: 10px; right: 10px;
    border: 1px solid red; display: block; background: #FFF } 

Javascript

$('button').click(function(){
    screenfull.request();
});

A final note: jsfiddle disallow the fullscreen mode (source: https://webapps.stackexchange.com/questions/26730/can-full-screen-mode-be-activated-in-jsfiddle) to see the demo you have to manually tweak jsfiddle iframe using chrome devtools or firebug as specified in the link above.

Answer 2

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

z-index: 2147483647;

Here is your updated fiddle: http://jsfiddle.net/TcpX5/36/

Answer 3

The problem is that the video is being displayed absolutely. You can make your link have position: absolute and that should do it.