Jump to content

Rounded Corners on Video

Recommended Posts

Hi

We've successfully added the following code to several videos on the website to give them a slight 5px rounded corner.

<style>
.video-player .plyr video {
    object-fit: cover !important;
    border-radius: 5px !important;
}
</style>

One problem we've come across is that it only seems to work on videos where mute and autoplay are enabled and not on videos where we require the user to press play themselves. Are we missing something? Could anybody help.

Duplicated the video on here, first one is autoplay off, second one is on.

https://www.thebehavioursgroup.co.uk/work/wmca-multiply-marketing-campaign
 

Thanks

Mark

Edited by mjgriffo
typo
Link to comment
  • Replies 5
  • Views 262
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Can you share the website site wide password?

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

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

 Did I help? Buy me a coffee?

Link to comment

It appears to have rounded corners when I view: 

image.png.13e6b5b4bb14b04de16624485d148dd7.png

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (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.