CODEWITHSUNDEEP
javascripthtmlcssvideofullscreen
Pr1
Pr1

Reputation: 51

How do I display my custom HTML video controls (or a div) on top of a full screen video?

I have been looking for a solution for the past two hours but haven't found one yet. I have these two javascript functions:

function fullScreen() {
     if (vid.requestFullScreen) vid.requestFullScreen();
     else if (vid.webkitRequestFullScreen) vid.webkitRequestFullScreen();
...
}

and another one for exiting full screen mode. However I can't seem to exit full screen mode with a double click event listener on my video and no matter what I tried, I wasn't able display my video controls in full screen mode. I have a video and a div (the controls) inside a div called "player_box". When I try raising the z value and change the controls div to absolute it has no perceivable effect on the div.

<div id="player_box">
    <video id="my_video">
        <source src="test2.mp4">
    </video>
    <div id="controls_bar">
        <a href="#" title="Play/Pause" class="tooltip"><span title=""><button id="playPause"></button></span></a>
        <input id="seekslider" type="range" min="0" max="100" value="0" step="1">
        <span id="curtimecode">00:00</span> / <span id="endtimecode">00:00</span>
        <a title="Mute/Unmute" class="tooltip"><span title=""><button id="mutebtn"></button></span></a>
        <input id="soundslider" type="range" min="0" max="100" value="100" step="1">
        <a title="Fullscreen" class="tooltip"><span title=""><button id="fullbtn"></button></span></a>
    </div>
</div>

Currently I can only interact with the video in "normal mode" I can use event listeners and video controls, but as soon as it becomes full screen there is no way for me to interact with it. I have to either reload the page or press Esc / F11.

Update: You can use the event listeners in full screen mode I have put in the wrong element, that's why it didn't work. The initial problem remain though.

Upvotes: 1

Views: 3189

Answers (1)

Daniel Beck
Daniel Beck

Reputation: 21514

The requestFullScreen() API can apply to any HTML DOM elements, not just <video> tags.

Right now you're setting the video element itself to fullscreen, so that's what shows up full screen.

You want the custom controls to be included, so set the parent element containing both the video and those controls to fullscreen:

function fullScreen() {
     var vidContainer = document.getElementById("player_box"); // instead of #my_video
     if (vidContainer.requestFullScreen) vidContainer.requestFullScreen();
     else if (vidContainer.webkitRequestFullScreen) vidContainer.webkitRequestFullScreen();
     // ...
}

You do need to set the CSS of the elements contained in the fullscreen node such that they'll actually fill the full screen area (100% width and height, etc.) If necessary, you can use the :fullscreen pseudo-class in most browsers to set different styling when in and out of fullscreen mode:

#player_box:fullscreen {position:relative}
#player_box:fullscreen #my_video {width: 100vw; height: 100vh}
#player_box:fullscreen #controls_bar {bottom: 0}

(...though now that I look more closely, support for this pseudo class is not complete; some browsers use :full-screen instead, and some don't support it at all. It may be better to toggle a new classname onto the element when triggering fullscreen, and base your fullscreen rules on that instead -- i.e. have css rules for #player_box and for #player_box.isFullscreen, and toggle .isFullscreen onto the element when needed.)

Upvotes: 2

Related Questions