CODEWITHSUNDEEP
csscross-browsercustom-controlshtml5-video
Filippo oretti
Filippo oretti

Reputation: 49817

Styling browser-native video controls

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>

Upvotes: 28

Views: 67314

Answers (3)

Fabian von Ellerts
Fabian von Ellerts

Reputation: 5201

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

Upvotes: 2

Kristian
Kristian

Reputation: 2261

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

Upvotes: 7

Ryan Weiss
Ryan Weiss

Reputation: 1318

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?

Upvotes: 4

Related Questions