is it possible to change default html5 video skin/color

Question

Is it possible to change default html5 video player\'s colors or complete skin?

<         


        

Answer 1

Yes it is, if your browser supports shadow DOM. On that case you will have selectors available to theme it on css like:

*::-webkit-media-controls-panel {
   background-color: red !important;
}

And many other pseudo attributes. To play with it, you can examine the shadow DOM on crome by enabling "Show user agent shadow DOM" on :

Developer tools -> Settings -> Preferences -> Show user agent shadow DOM

Answer 2

Thing is that media control styles are only available deep into shadow dom. There is a list here: https://gist.github.com/afabbro/3759334

Look at the main thread and the comments as well. They are keeping these more or less up to date. I mean, maybe it'll have a good use for you, maybe not, but it's nice to know that there is some level of support to this kind of styling.

Pay attention that you may inspect shadow DOM on your browser to see classes added into the shadow elements, but you can edit just the ones prefixed with "-webkit"

Answer 3

There's no way of re-skinning the browsers native HTML5 video controls. However, you can omit them completely (by removing the controls attribute), and implement your own controls using HTML, CSS and the HTML video API (good reference here).

There's a guide here which will get you started.