Overlay on HTML5 Fullscreen Video

Question

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!!!.

score 33 · Accepted Answer · edited Nov 04 '20 at 17:32

33

The best way to do this is to have a <div> containing the <video> and 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.

edited Nov 04 '20 at 17:32

soviet-onion

3
1
3

answered Sep 03 '13 at 22:17

Chris Pearce

371
3
4

Spent half a day trying to figure out the z-index thing below in Firefox. This is a much better solution. – Cody Moniz Dec 08 '16 at 20:06
I don't think this is possible using the video control's fullscreen button which will set the video to fullscreen and can't be cancelled. – junvar Sep 22 '19 at 18:27
@junvar - maybe overlay the fullscreen button as well? – Ropstah May 16 '20 at 00:23
1

as a chrome extension, NOT web dev, is there any way to fullscreen the `
` containing the video, if the video was fullscreened using video fullscreen button: this emits no clickevent, so there's no way to exitFullScreen, then enterFullScreen of container `div`(requires user input!), one workaround I can think of is to replace the native controls of EVERY `video` with custom buttons, of which I can listen to the clickevent. W3C spec Solutions? : add onclick/keydown event to video fullscreen button. OR make onfullscreenchange able to call requestFullscreen if it DID come from mouse/keyboard
– Mr. Doge Oct 14 '21 at 22:01

score 19 · Answer 2 · answered Apr 26 '13 at 15:42

19

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?

answered Apr 26 '13 at 15:42

Carmijoon

477
5
11

1

Brilliant! Just brilliant! If I could upvote this answer by 100, I'd do so. I was despairing of getting an overlay on a fullscreen element till I found this answer. Thanks a million, Carmijoon! – Velojet Apr 12 '16 at 21:09
1

It is working for chrome, but it seems does not work for firefox and IE – andiwin Mar 05 '17 at 23:14
3

This does not work in mobile. Any idea how to get this to work on Android Chrome? – skos Jun 18 '17 at 23:18
Downwote because all you euphoric upvoters, try the solution in Firefox – Dalibor Aug 21 '17 at 12:41
Here's the Firefox solution: https://stackoverflow.com/questions/45798213/firefox-fullscreen-video-append-dom-elements – Dalibor Aug 30 '17 at 10:58
2

Down voting for it does not work in full screen. – Ajeet Eppakayala Aug 17 '21 at 11:42
doesn't seem to work any longer – supersan Apr 28 '22 at 09:56
does not work anymore – Shiba Das Sep 16 '22 at 16:04

Overlay on HTML5 Fullscreen Video

2 Answers2

Linked