Strange top padding for Youtube embed, only on 3 of 21 collection pages

Community resources
1

Hi,

I have created a bunch of collection pages, which pull info from our CMS.
Part of the page is a Youtube embed that is revealed when clicking on a thumbnail. I set the dimesions of the video so that they fit the Youtube video dimensions.

It all works fine for 18 of the pages in the collection, however, strangely on 3 of them there is a strange top padding of 75% that pushes the video outside of the frame.

image
image1360×794 83.5 KB

These are three collection pages this happens on. All others are working fine:

Looking at the developer tools there seems to be a 75% top padding on the “mission-report-hero_video” class. Strangely this is only present for the pages mentioned above.

It would be great if someone could help with this issue…

Here the preview link:
https://preview.webflow.com/preview/planetwild?utm_medium=preview_link&utm_source=designer&utm_content=planetwild&preview=166c8fa361f18999cd8b38da14bb92f6&pageId=665f17d0fb4bfc1e81146209&itemId=66b0de6ed37ec30cfe5aaa92&locale=en-US&workflow=preview

2

Not sure why that is happening but you could set the top padding to 0% !important.

Screenshot 2024-12-12 at 1.21.33 PM
Screenshot 2024-12-12 at 1.21.33 PM662×354 19.9 KB

3

@mdelsing06 I was also looking into that. But on the relevent element I don’t get the option to define padding. Webflow shows “Magic” for top padding there. I think that might also be the reason why it is behaving strangely.
The “magic” padding usually makes sure that videos stay responsive and with proper aspect ratio, but in this case it does the exact opposite.

image
image462×276 8.2 KB

4

@mdelsing06 actually I misunderstood your comment. I added the custom property and it actually worked. Thanks for your advice!