How Do I Make A Div Visible On Top Of An Html5 Fullscreen Video?

December 27, 2023 Post a Comment

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 ap

Solution 1:

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/

Solution 2:

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

<divid="video"><videowidth="100%"src="yourmovie.webm"controls></video><br/><button>go full screen</button><ahref="#">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.

Solution 3:

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

Solution 4:

HTML:

<divid="wrapper"><a>element I want to be visible in full screen mode</a><video...></div>

JS:

const wrapper = this.document.getElementById('wrapper')
wrapper.requestFullscreen()

This code will typically be executed within a button click. All elements inside the wrapper will now be visible in full screen mode. You may need to apply different styling to your elements in full screen mode. e.g. you may want to make the video width or height 100%

Use this to know whether you are in full screen mode or not:

document.onfullscreenchange = () => {
  this.isFullScreen = !!document.fullscreenElement
}

Use this to exit fullscreen mode:

document.exitFullscreen()

Html5 Tips