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.

default player controls

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>

https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Video_player_styling_basics — Brad, May 21 '19 at 02:45

score 7 · Answer 1 · answered Aug 02 '17 at 07:35

7

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

answered Aug 02 '17 at 07:35

Kristian

2,071
23
15

1

Being opened in Safari (11.0.1 at moment) this nice example does not work at all. It looks like Safari totally denies any modifications of media elements. And even programmatic control is denied – https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/ – jeron-diovis Feb 01 '18 at 08:52

score 3 · Answer 2 · edited May 23 '17 at 12:02

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?

edited May 23 '17 at 12:02

Community

1
1

answered Sep 23 '16 at 23:29

Ryan Weiss

1,308
1
14
36

1

What bugs the hell out of me is that you can seemingly do custom styles just fine in the browser's inspector but when you start trying to put that very same code, using the selectors that worked into a CSS file the browser (tried with chrome and firefox) just refuse to display your changes, or worse just utterly break and not show anything at all. – Bryan Myers Sep 26 '19 at 17:45

score 1 · Answer 3 · answered May 27 '19 at 12:40

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

Styling browser-native video controls

3 Answers3

Linked

Related