javascript - change html5 video controls layout when fullscreen

Question

I'm following this tutorial on how to change html5 video controls layout. But when i go fullscreen mode, the controls goes back to default. Do anyone have an example on how i can change the layout in fullscreen mode?

Answer 1

Hide the native controls completely, in both normal and full-screen mode:

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

Set the z-index for the custom controls to be equal to or higher than 2147483647:

#video-controls {
  z-index: 2147483647;
}

Source: Hiding Native HTML5 Video Controls in Full-Screen Mode

Note: if you are following the tutorial, then you need to also set position of custom controls to make it visible:

#video-controls {
  z-index: 2147483647;
  position: absolute; /* top left corner, change it if you like */
}