How do I make a DIV visible on top of an HTML5 fullscreen video?
The problem is that the video is being displayed absolutely
. You can make your link have position: absolute
and that should do it.
How to show my div panel in full screen HTML5 video player?
You might request Fullscreen on your video_player_box
container.
So replace var video_player = document.querySelector('[video-player]');
with var video_player = document.querySelector('#video_player_box');
and update your css (see the snippet below):
#video_player { width: 100%; height: 100%;}
#controls { width: 100%; height: 6.5%; opacity: 0.9; position: absolute;; bottom: 0; z-index: 100; background-color:#55b2ff;}
#video_player_box { position: relative; width: 100%; height: 75%;}
#video_player_box:-moz-full-screen {height:100%}#video_player_box:-webkit-full-screen {height:100%}#video_player_box:-ms-fullscreen {height:100%}#video_player_box:fullscreen {height:100%}
<html><head> <meta charset="utf-8"/> <title></title></head><body> <div id="video_player_box"> <video video-player controls id="video_player" src="http://dash.akamaized.net/akamai/bbb/bbb_1280x720_60fps_6000k.mp4"></video> <div id="controls"> <!--CONTROLLERS WILL BE HERE--> </div> </div> <p><button id="full_screen">FULL SCREEN</button> <script> var video_player = document.querySelector('#video_player_box'); var button = document.getElementById("full_screen"); button.addEventListener('click', function () { if(video_player.requestFullScreen){ video_player.requestFullScreen(); } else if(video_player.webkitRequestFullScreen){ video_player.webkitRequestFullScreen(); } else if(video_player.mozRequestFullScreen){ video_player.mozRequestFullScreen(); } }); </script></body></html>
Make a div visible on full screen of another div
It seems it was once possible to solve this issue with z-index but its since been patched by newer browser releases - See this thread
I believe Tushar Vaghela's answer is your best chance of achieving your desired result, which is to include the elements you wish to overlay within the fullscreened element - See this thread.
Force a div to show up and overlay whatever is in fullscreen
This is not likely to be possible. The video player fullscreen implementation takes over the entire screen; you do not have a browser window to overlay on anymore.
It's not the same as going fullscreen in your browser, where you still have the normal browser window to work with.
edit: to expand further;
With any video player using Flash, this is absolutely not possible, because you have no chance of any HTML elements to overlay onto; the fullscreen is handled by flash itself, and you can't do anything with that.
With HTML5, from my testing it also seems impossible. I went to this sample page, edited the HTML in the dev tools to try inserting a div inside the video element, but it won't render.
If you had control over the pages, it might be possible to fullscreen a container div instead of the video itself, and then achieve what you want, but since you can't control the pages in question, that likely won't help you at all (unless you wanted to try replacing IDs/etc in-page, but even that wouldn't guarantee success; if the page JS already had handles on the relevant elements, replacing IDs wouldn't update those)
Overlay on HTML5 Fullscreen Video
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.
Related Topics
2-Column CSS Responsive Layout with a Responsive Image
Why Can't an <Ul> (With Absolute Position) Inside a <Li> (With Relative Position) Auto Size
Firefox Not Recognizing a Font
How to Center The Zurb Foundation Top Bar Nav
Remove All Borders on a Specific Datatable
What Are The Best Practices for Writing Maintainable CSS
How to Override Scoped Styles in Vue Components
How to Use Font Awesome in Own CSS
Use Table Row Coloring for Cells in Bootstrap
Vaadin - Coloring Table Cells Based on Content
The Min/Max-Width Media Query Doesn't Make Grammatical Sense
Internet Explorer Incorrectly Calculates Percentage Height for Generated Content in Td
What Is The Replacement for The Child Selector