Jump to content

video - fill container and round corner

Go to solution Solved by tuanphan,

Recommended Posts

Posted (edited)

See the url.

I would like the video at the top to fill the given container and to match the rounded corners across the rest of the site.

This is what I am using so far that got the video close to filling the container:

.video-block .video-player{
padding-bottom:45%
}

I have no idea whether this is the right way to go about it.

Thanks for any help!

Edited by LabJT
add url
  • Replies 5
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Posted

To make video round corner, try adding this to Design > Custom CSS

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

.plyr__video-wrapper video, .plyr__video-wrapper
{border-radius:20px !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!)

Posted (edited)

@tuanphan Thanks. That worked, but there is still a hard "corner" where the curve meets the edge. This make me think the video is not filling the block all of the way.

Ideas how to fix?

Edited by LabJT
  • Solution
Posted
On 7/31/2023 at 10:01 PM, LabJT said:

@tuanphan Thanks. That worked, but there is still a hard "corner" where the curve meets the edge. This make me think the video is not filling the block all of the way.

Ideas how to fix?

Add this CSS under

.fe-64931403881ade65a25dbee4 .plyr__video-wrapper video, 
.fe-64931403881ade65a25dbee4 .plyr__video-wrapper {
    border-radius: 20px !important;
    width: 100% !important;
    height: auto !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!)

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.