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.