Embedded YouTube videos are different sizes in CMS?

[alexc220 (Alex Cooney)]

Building a CMS for a music podcast. Each episode page has a different youtube video embedded. The first 2 are fine:

But for some reason the YouTube video is coming in at a bigger height in the 3rd one?

Any idea what might be causing this?

[dennyhartanto]

@alexc220 are you able to share the read-only/published link?

[alexc220 (Alex Cooney)]

Sure, here you go

https://preview.webflow.com/preview/ceol-mining?utm_medium=preview_link&utm_source=designer&utm_content=ceol-mining&preview=454a33ad12fac57f2fd55a704770430c&mode=preview

[dennyhartanto]

The video element has a set padding-top: auto. Which by default will adjust the aspect of the video based on the origin.

You should be able to override this with the code below and set Video 2 to 100% width and height to fill the div parent.

<style> .video-2 { padding-top: 0px !important; } </style>

Just add a HTML embed on the page or you can also just add it into the section of the page.

[alexc220 (Alex Cooney)]

@dennyhartanto

<style> .video-2 { padding-top: 0px !important; } </style>

Thanks so much for this @dennyhartanto. Just so I’m clear, should I be putting this in the body or the head of the page?

Have also tried styling the “video” class (in addition to “video-2”) but it doesn’t seem to be working. You can see from the link below I’ve done the html embed and custom code in the page but no luck

https://preview.webflow.com/preview/ceol-mining?utm_medium=preview_link&utm_source=designer&utm_content=ceol-mining&preview=454a33ad12fac57f2fd55a704770430c&pageId=6002b3649b8a536d26fb6049&itemId=60044e889d09e5c32e768894&mode=preview

[dennyhartanto]

@alexc220 Very close. you just have to do this and it should be fixed.

[alexc220 (Alex Cooney)]

@dennyhartanto you are a life-saver - thank you so much! Works perfectly now.