Padded videos and rounded corners

Soldato
Joined
27 Dec 2005
Posts
17,281
Location
Bristol
Our staged website is https://jonesmillbank.webflow.io. All our videos and images have a 20px border-radius. I've adjusted the video embed at the top to have a top padding of 42.41% since that video is super-widescreen. It displays correctly on page load, but when you click play on the video the padding seems to adjust itself slightly causing the rounded corners to clip (and in doing so showing the black rounded corners within the video).

Oddly after pressing play if you adjust the padding to the same (tick it on and off) in Inspect then it looks fine. Same with any other CSS, ie position.

Videos on other pages in standard 16:9 with a padding of 56.25% - ie https://jonesmillbank.webflow.io/work/university-of-bristol/graduate-profiles - don't do this.

I can't seem to work out what's going on. Any ideas?

* I would ask you web dev but he's currently undergoing an operation!
 
Last edited:
Soldato
Joined
26 Sep 2010
Posts
7,137
Location
Stoke-on-Trent
Padding and margins set the percentages will be the percentage of the element's width (yes, padding the top and bottom will be the percentage of the elements width).

Looks like you're trying to do the aspect ratio trick by using vertical padding on a zero-height element. No need to any more, but that depend son how far back you want your browser support to be.

CSS has an aspect-ratio property now so you can define what you want the aspect ratio of any element to be. e.g.

aspect-ratio: 16 /9;
aspect-ratio: 21 / 9;

So you can strip out the padding fudge and just apply this to your video container DIV. However, it's not supported in browsers before 2021.

However, looking at your code you've over-complicated things a little. You already have rounded corners of 20px set on the .video-holder-edges DIV, you don't need to apply it to the .vimeo DIV as well. Now that you've set the border-radius to a fixed unit you don't need the negative margin fudge any more.
 
Back
Top Bottom