Jump to content

Video player controls background color

Go to solution Solved by BekarHaus,

Recommended Posts

  • Replies 3
  • Views 894
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hello Auspayday,

Thank you for looking into this matter.
I might have asked this question the wrong way, what I need to know is "class name".

I've tried everything I could think of to find class name to target that specific element - without luck.

Best Regards

Dušan Bekar

bekar.haus

Link to comment
  • Solution

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

 

 

bekar.haus

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.