Styling browser-native video controls

Question

Is it possible to cross-browser style the controls of a browser-native video such as video from HTML5's video tag?

I do not understand if it is possible or not, I can't find anything other than this article but it seem uses Javascript.

I would like to make the controls bar fit the video width; as you can see from the image attached, the controls bar excedes the video width.

HTML for the above image

 <div class="video centered-content">
    <a class="circle-canvas close-video" href="javascript:void(0)" id="video-close" rel="tooltipTOP" data-original-title="close">X</a>
        <video width="63%" height="60%" id="video" class="video" controls>
            <source src="<?php echo base_static_url();?>media/video.mp4">
            <source src="<?php echo base_static_url();?>media/video.ogv">
            <source src="<?php echo base_static_url();?>media/video.webm">
        </video>
    </a>
</div>

Answer 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.

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

Answer 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?

Answer 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

Answer 5

Since you can't style the controls in every browser (namely Firefox), using custom controls is the way to go.

Writing your own is possible but takes some time and doesn't have the functionality that some other controls have.

I recommend Flowplayer which is very easy to use and style. It also has other useful features such as allowing you to control how the video is loaded (which is very useful for us since AWS S3 charges per view of the file).