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 element with your JW Player implementation:

HTML

    

    go full screen
    Special link

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.