CODEWITHSUNDEEP
csshtmlgoogle-chromevideo
sirx
sirx

Reputation: 55

Styling native Google Chrome Video Controls

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/

Upvotes: 5

Views: 7926

Answers (3)

shehab hajyhia
shehab hajyhia

Reputation: 1

I succeeded in positioning the controls in a way without overlay the original video screen by:

 video::-webkit-media-controls-enclosure {
    overflow:hidden;
    position: absolute;
    bottom:-32px
}

video::-webkit-media-controls-panel {
    display: flex !important;
    opacity: 1 !important;
}

hide download button by adding:

video::-internal-media-controls-download-button {
    display:none;
}
video::-webkit-media-controls-panel {
    width: calc(100% + 30px);
}

Upvotes: -1

PieBie
PieBie

Reputation: 3449

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

Upvotes: 5

user6678755
user6678755

Reputation: 11

There isn't any CSS style to change the little blue circles in the same sense as your example; they're images that are packaged into chrome. Maybe one of the css3 image filter properties would work.

There's also a small caveat to overriding these styles in general: they are internal to chrome, and are subject to change at any time. Pages that depend on them might find that they simply don't work the same way in some future version of chrome.

If you'd like media controls with a custom look on your page, then you might want to take a look at the many javascript media players that give you quite a bit more flexibility. They also work across different browsers.

Upvotes: 1

Related Questions