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?

<video id="sampleMovie" src="HTML5Sample.mov" controls></video>

Threemaster

hongkiat.com/blog/html5-videos-things-you-need-to-know – Bhagavadgita

Answer 1

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.

Arezzo

Thanks. it was usefull. – Threemaster

Custom controls is what video.js started as, and you can use the video.js designer to make the controls look however you want. – Elude

Answer 2

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

Maurine

Answer 3

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"

Guthrun

Unfortunately, the link is dead – Countersubject