How do I remove the gradient on video player?

Site URL: https://www.breemelanson.com/the-membership

I need help removing the black gradient on the video control panels on this page. 

Is there a CSS to fix this? 

Hi All,

i started adding video content to my site with the new editor.

Is there a way to remove the shadow gradient from over the videos?

I tried site styles but cant see any settings in there for it.

thank you

Steve

15 minutes ago, stevecontor said:

Is there a way to remove the shadow gradient from over the videos?

See my answer above.

Hi, I have done this and while it works initially in the backend, in the front end it goes back to the faded version. Is there an obvious reason for this? See back end and front end below. thanks in advance for the help.

Hi Squarespacers,
I found some solutions to customize gradient on SQSP native video player.

Hope you'll find it useful 😀

/* Hide controls gradient on native video player */
.video-player .plyr .plyr__controls:before {
  background-image: none;
}

/* Hide controls on native video player */
.video-player .plyr .plyr__controls {
  display: none;
}

/* Change symbol and background color of Play/Pause button */
.video-player .plyr--video .plyr__control--overlaid {
  color:rgba(255,255,255,0.35) !important;
  background: #00B0A3 !important }

/* Customize video player gradient */
.video-player .plyr .plyr__controls::before
{
    height: 25% !important;
    background-image: linear-gradient(0deg,rgba(0,176,163,1),rgba(0,176,163,.9) 50%,rgba(0,176,163,.85)) !important;
  }
/* Tablet and desktop break */
@media only screen and (min-width: 641px){.video-player .plyr .plyr__controls::before {
    height: 8% !important;
    background-image: linear-gradient(0deg,rgba(0,176,163,1),rgba(0,176,163,.95) 50%,rgba(0,176,163,.9)) !important;
  }}

"height" is for (obviously) height of the gradient, and with "background-image" you can control color/transparency of gradient.

Be cautious when using "height" property because it could cover different area on desktop/mobile. I break it for Tablet & Desktop - @media only screen and (min-width: 641px) { INSERT CODE HERE } — as you can see in screenshots bellow (there isn't black line around larger video) .

/* Hide video caption */
.video-caption
{display: none !important}

Best Regards

Duško Bekar

What might be the CSS for just the timeline?