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?
BekarHaus's post in Video player controls background color was marked as the answer
