title: Styling browser-native video controls
body: <p>Is it possible to cross-browser style the controls of a browser-native video such as video from HTML5's video tag?</p>
  
  <p>I do not understand if it is possible or not, I can't find anything other than <a href="http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/" rel="noreferrer">this article</a> but it seem uses Javascript.</p>
  
  <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/HIu79.png" alt="default player controls"></p>
  
  <p>HTML for the above image</p>
  
  <pre><code> &lt;div class="video centered-content"&gt;
      &lt;a class="circle-canvas close-video" href="javascript:void(0)" id="video-close" rel="tooltipTOP" data-original-title="close"&gt;X&lt;/a&gt;
          &lt;video width="63%" height="60%" id="video" class="video" controls&gt;
              &lt;source src="&lt;?php echo base_static_url();?&gt;media/video.mp4"&gt;
              &lt;source src="&lt;?php echo base_static_url();?&gt;media/video.ogv"&gt;
              &lt;source src="&lt;?php echo base_static_url();?&gt;media/video.webm"&gt;
          &lt;/video&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>