Jump to content

Remove transparent circle behind play / stop button in video block

Go to solution Solved by Ziggy,

Recommended Posts

Dear appreciated forum,

could someone help me please?

I am trying desperately to remove the background circle in the video block with custom CSS code – as close as it gets, the "circle" behind the "play / stop button" gets only transparent. I simply want it everything out, so only the stop and play element are remaining.

Here is my code:

/* Hide controls on native video player */

.video-player .plyr .plyr__controls {
  display: none !important;
}

/* Change symbol and background color of Play/Pause button */

.video-player .plyr__control {
  color: white !important;
background: none !important; }

Thanks a lot in advance for your help.

New Note.jpg

Link to comment
  • Solution
Posted (edited)

Try this custom CSS:

.video-player.video-player--medium .plyr--video .plyr__control--overlaid {
    background: transparent !important;
}
.video-player .plyr--video .plyr__control--overlaid {
    -webkit-backdrop-filter: blur(0px) !important;
    backdrop-filter: blur(0px) !important;
}

 

Edited by Ziggy
correction

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
3 hours ago, ChristophMatt said:

fix an syntax error

Sorry, I see the bracket I missed!

Not sure why that wasn't working on mobile, try adding this:

.video-player .plyr--video .plyr__control--overlaid {
    background: rgba(0,0,0,0.0) !important;
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? 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.