Can we change browser's native video player's css ? if not what is the lightest html5 video player plugin which can be stylise easy?

Question

Is it possible to just use audio control and hide others from html5 video controls bar?

I want to hide control bar and just use audio turn off/on button. I read revelant article on w3schools but can't find the solution.

Is it possible to change css positions audio mute button? i marked on this picture.

Here is jsFiddle sample.

Edit: Do we have any chance to change video control's css and re-style them for our needs?

If not, what is best and light html5 video player we can stylise ?

Answer 1

Not if you're using the browser's native controls. There's no access to modify the native controls, and even if there were, the controls are different between browsers.

You could build your own volume control that overlays the video and turn the native controls off.

Or you could use an HTML5 video player (a javascript library for video) and modify the CSS for it.

Answer 2

The html5 video tag has some css options for its control bar.

For instance, if you want to hide the mute button you can use:

video::-webkit-media-controls-mute-button {
  display: none;
}

Here are all the css options I'm aware of:

video::-webkit-media-controls-panel {}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-volume-slider-container {}
video::-webkit-media-controls-volume-slider {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display {}
video::-webkit-media-controls-timeline-container {}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-seek-back-button {}
video::-webkit-media-controls-seek-forward-button {}
video::-webkit-media-controls-fullscreen-button {}
video::-webkit-media-controls-picture-in-picture-button {}
video::-webkit-media-controls-rewind-button {}
video::-webkit-media-controls-return-to-realtime-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-full-page-media::-webkit-media-controls-panel {}

Answer 3

You can style the native controls to some extend by addressing the Shadow DOM, using browser vendor specific pseudo element selectors like video::-webkit-media-controls-panel, but—like @heff said—these controls differ between browsers, and building your own offers more control. Remember: html[5] Video is more than just the video tag; it comes with a nice (JavaScript) API.