Custom HTML video controls

Question

Is there any way to hide the "more options" button on a video player (allows to download the video for example).

I'd like to keep the play/pause button only so I hide the others like this :

video::-webkit-media-controls-fullscreen-button,
video::-webkit-media-controls-timeline,
video::-webkit-media-controls-mute-button,
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display {
  display: none;
}

But I can't find the property for the "more options" button (if it's not clear, it's the one with 3 dots).

Thanks for your help!

Answer 1

As far as I know, there isn't a standard way to directly hide or customize this button using CSS alone. If you really need to just hide the download button then add this option to your <video> tag setup:

controlsList="nodownload"

You can try something like this code (Run the preview):

<video width="320" height="200" controls controlsList="nodownload" >
<source src="https://www.w3schools.com/css/mov_bbb.mp4" type="video/mp4">
</video>

Maybe that option is good enough to be a solution for your problem?

Other solutions include:

• Creating a custom video player using HTML, CSS, and JavaScript, giving you full control over the player's appearance and behavior.

• Using an already existing player library (eg: popular videoJS) that could offer more customization options. Investigation starts with a google search.