Jump to content

How do I remove the gradient on video player?

Go to solution Solved by paul2009,

Recommended Posts

  • Solution
6 hours ago, breemelanson said:

I need help removing the black gradient on the video control panels

image.thumb.png.c83080c1f2a763b6bff9ec521c0fdf9c.png

You can remove the background gradient behind the controls on the native video player with the following CSS, but it will make them difficult to see and could present accessibility issues:

image.thumb.png.9619e2265346750b71a0e19cf1334340.png

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

If you don't want to see the gradient or the player controls, you can hide both instead: 

image.thumb.png.90df76d435c29e2a1c176af83cf53600.png

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

 

Was this post helpful? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 3 months later...
  • stevecontor changed the title to remove shadow over video content
15 minutes ago, stevecontor said:

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

See my answer above.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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.