Padded videos and rounded corners

[Russinating]

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!

 

[Russinating]

Sorted, realised it was adjusting it to 42.5% due to rounding. Fixed by making that the top padding and using margin -10px to adjust the display accordingly.

 

[LePhuronn]

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.