Styling browser-native video controls

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;
}

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

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?