Custom HTML5 Video Controls doesn't appear in fullscreen mode

Question

so I've built a custom html controls for the element and hooked it up to JavaScript to make the video functionality work, it all working just fine.

The issue is when I call requestFullscreen(), The default browser controls show on fullscreen preview, the easy fix was to remove it from css like so:

Css

video::-webkit-media-controls {
    display: none !important;
}

And now the video is in fullscreen without the controls, now I can't control the video and the HTML controls aren't being shown in fullscreen, I tried fixing it by adding z-index:100 but that didn't work.

I saw this post from 8 years ago: change html5 video controls layout when fullscreen

But this answer also didn't work for me, and I think there should be a better way to do it right?

It doesn't even work in css-tricks tutorial demo here: custom controls in html5 video full screen

My Question is:

How can I allow the HTML5 controls element (found in HTML) to show in fullscreen mode.

HTML

30| 
31| // Controls HTML5... 
201| 
231|

JS


let fullScreen = document.getElementById("full-screen-icon");
fullScreen.addEventListener("click", toggleFullScreen);


function toggleFullScreen() {
    video.requestFullscreen().catch(e => console.log(e));
}

Control Bar:

Video On Fullscreen (before)

Video On Fullscreen (after)

mseifert · Answer

When you request fullscreen, you need to use the wrapper div not the video control for the element - e.g. div.requestFullscreen(). There is no need for the z-index hack either.

The code below won't run in the snippet because SO blocks fullscreen mode and also won't load videos. If you cut and paste the code with a valid video source, this will work.

Note, since it's the wrapper div which is going full screen, it is up to you to make sure that your video element (and custom controls) resize to fill your video div wrapper.

window.onload = function(){
  let fullScreen = document.getElementById("full-screen-icon");
  fullScreen.addEventListener("click", toggleFullScreen);

  let playButton = document.getElementById("play");
  playButton.addEventListener("click", play);
}

function toggleFullScreen() {
  var div = document.getElementById("wrapper");
  div.requestFullscreen().catch(e => console.log(e));
}

function play(){
  let video = document.getElementById("video");
  video.load();
  video.play();  
}

Custom HTML5 Video Controls doesn't appear in fullscreen mode

Control Bar:

Video On Fullscreen (before)

Video On Fullscreen (after)

1 Answers