Video player controls background color

Hi Tuan,
Thank you for looking into this matter.

I've searched everywhere from Stack Overflow to mdn web docs.

I get solution with this custom CSS

https://jsfiddle.net/z906whne/

video::-webkit-media-controls-panel {
   background-image: none !important;
   filter: brightness(0.4);
  }

It removes gradient entirely,
but with this code I was able to accomplish what I want;

video::-webkit-media-controls-panel {
background-image: linear-gradient(45deg,rgba(157,131,62,1) 25%, yellow, rgb(255,0,0) 50%, #00B0A3) !important;
     filter: brightness(1);
     box-shadow: none !important;
    }

So, webkit pseudo element for video control panel is:

video::-webkit-media-controls-panel

You could also use other pseudo in css to control the native video like:

video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-volume-slider {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display {}

In addition, I run into two problems:

1. How to reduce the height of "-webkit-media-controls-panel"?

2. On Desktop, in Chrome, Brave or Vivaldi — control customizations look different than it's in Safari, Firefox and Tor.

How to make them to look the same across different browsers?

Link to the site

PW: Bekar2022

Best

Duško Bekar

Quote

 

List of pseudo elements:

<video>
video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-overlay-play-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

<audio>
audio::-webkit-media-controls-panel
audio::-webkit-media-controls-mute-button
audio::-webkit-media-controls-play-button
audio::-webkit-media-controls-timeline-container
audio::-webkit-media-controls-current-time-display
audio::-webkit-media-controls-time-remaining-display
audio::-webkit-media-controls-timeline
audio::-webkit-media-controls-volume-slider-container
audio::-webkit-media-controls-volume-slider
audio::-webkit-media-controls-seek-back-button
audio::-webkit-media-controls-seek-forward-button
audio::-webkit-media-controls-fullscreen-button
audio::-webkit-media-controls-rewind-button
audio::-webkit-media-controls-return-to-realtime-button
audio::-webkit-media-controls-toggle-closed-captions-buttone