Jump to content

CSS for rounded corners of uploaded videos?

Go to solution Solved by Mark.Hook,

Recommended Posts

  • 3 months later...
On 7/9/2023 at 1:41 AM, tuanphan said:

You can use this CSS code

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

.plyr__video-wrapper video, .plyr__video-wrapper
{border-radius:30px !important;}

 

Thank you, but, this also rounds the corners on background videos, is there a way to make it only for imbedded videos?

Link to comment
On 7/19/2023 at 8:30 AM, dudecctv said:

Yes, that is what I mean. Because currently, the code is applying it to section background videos as well.

Use this new code

.fe-63eea7c825f23c0a3c9cc974 {
.video-player .plyr .plyr__controls:before
{display:none!important;}

.plyr__video-wrapper video, .plyr__video-wrapper
{border-radius:30px !important;}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 5 months later...
On 1/11/2024 at 1:21 AM, Silas_Nogueira said:

Hey @tuanphan, following the topic:
how can I round the corners of Vimeo videos?

The CSS code above is not working for me : (

https://www.silasnogueira.com/work-1/frootloops

Thanks!

Use this code

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

.plyr__video-wrapper video, .plyr__video-wrapper, .sqs-video-overlay
{border-radius:30px !important;}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hey, @tuanphan its me again 😅

I noticed the Background video on my index page now it has a rounded corner too, but for this one, I'd like to make it square.

Is it possible to change the corners for only one video (to square)? For the other videos, I'll keep it rounded.
Would you mind helping me again?

www.silasnogueira.com

THANK YOU!

Link to comment
On 1/19/2024 at 7:40 AM, Silas_Nogueira said:

Hey, @tuanphan its me again 😅

I noticed the Background video on my index page now it has a rounded corner too, but for this one, I'd like to make it square.

Is it possible to change the corners for only one video (to square)? For the other videos, I'll keep it rounded.
Would you mind helping me again?

www.silasnogueira.com

THANK YOU!

You can use this CSS under

[data-section-id="635ae09c7c826e6c3f5c1a83"] .plyr__video-wrapper, [data-section-id="635ae09c7c826e6c3f5c1a83"] video {
    border-radius: 0 !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
On 2/9/2024 at 4:15 AM, Briana1 said:

Hi!

I am trying to do the same thing but the above code isn't doing anything. I want to make all my videos that are not background videos rounded. Can you help?

Can you share link to page where you use video?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
On 4/4/2024 at 10:52 AM, wearelightning said:

Is it possible to make this apply only to videos in the body of my site, not in the header? 

When I have video as a background of the header it rounds the edges and doesn't look right.

Will attach the screenshot to show what I mean.

Screenshot2024-04-03at9_51_44PM.png.571591236d6fc7290e0bf2ab134903d0.pngimage.thumb.png.8d201e3649609552b628e44c59cac871.png

I see some code in this thread, which exact code did you use? 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 7/9/2023 at 4:41 AM, tuanphan said:

You can use this CSS code

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

.plyr__video-wrapper video, .plyr__video-wrapper
{border-radius:30px !important;}

 

Okay, this works great to set a border radius for the video blocks. However, there is a very brief moment when the page loads that the borders are straight before changing. How to set the border radius for the first frame of the video? I do not have a custom image for the video block.

Link to comment
On 4/9/2024 at 12:06 AM, JamIsJam88 said:

Okay, this works great to set a border radius for the video blocks. However, there is a very brief moment when the page loads that the borders are straight before changing. How to set the border radius for the first frame of the video? I do not have a custom image for the video block.

Can you share link to page where you use video? I will check it again

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.