Padded videos and rounded corners

Soldato
Joined
27 Dec 2005
Posts
17,296
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:
Back
Top Bottom