Styling browser-native video controls

Solution 1:

You can't style the browser's default control set, but you can use the (JavaScript) Media API to build your own control set which of course you can style in any way that you like.

Take a look at Working with HTML5 multimedia components – Part 3: Custom controls which shows you how this can be done.

Solution 2:

Here is a good example for styling native player controls(just tested in Chrome): https://codepen.io/BainjaminLafalize/pen/GiJwn

To change the width of the player controls bar:

video::-webkit-media-controls-panel {
  width: 40px;
}

Solution 3:

You can style native controls in some browsers, using shadow DOM. Enable shadow dom in debug inspector settings:

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/

HTML5 Video Controls - make larger?

Solution 4:

You could style the shadow DOM, but you need to look at every browser individually and a browser update could destroy your styling.

I recommend taking a look at MediaElement.js which gives you cross-browser controls that can be styled using CSS and are already accessibility-optimized.

Or if you only need a few controls anyway, build your own: https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Video_player_styling_basics