Styling native Google Chrome Video Controls

Question

Hello I am tired of the boring looking Google Chrome native html5 video player design.

It's getting worse with every time they change it.

Right now it's in a bright white which is completely unsatisfying when you ask me.

So I decided to create a little userstyle to make it dark.

This is how far I came but it's not possible for me to change the color of the little circle.

Any help is welcome.

This is my actual progress:

video::-webkit-media-controls-panel {
    background-color: #161618;
}

video::-webkit-media-controls-volume-slider-container {
    background-color: cyan;
}

video::-webkit-media-controls-volume-slider {
    background-color: #1FB2B0;
}

video::-webkit-media-controls-timeline {
    background-color: #1FB2B0;
}

Here is the jsfiddle link for it.

https://jsfiddle.net/cyc1j0nv/7/

Answer 1

I eventually got where I wanted to go (more or less) by applying a filter to the media controls as a whole. Of course, one could also apply filters to each pseudo-element of the controls individually.

video::-webkit-media-controls{
  filter: hue-rotate(180deg) brightness(0.9);
}

<h1>Styling video controls</h1>
<video controls src="https://a.desu.sh/zflbzy.webm"><</video>

*Note: it's up to the user to add vendor-prefixes to the CSS as required