Help w/ Excess Padding in Dynamic Youtube Embed Containers

Technical Q&A

Topic summary

A user encountered excessive padding between two embedded YouTube videos on their page when using custom Liquid code. The padding appeared to originate from the bottom of the first video container, and adjusting padding-bottom clipped the video content.

Solution implemented:

  • Replaced the padding-bottom ratio hack with CSS aspect-ratio property
  • Adjusted container margins and spacing
  • Ensured containers use overflow:visible to prevent clipping

Additional fix:
After resolving the padding issue, videos were left-aligned. The user solved this by wrapping iframes in <div align="center"> tags.

Status: Resolved. The user successfully eliminated excess padding and centered the video embeds using the suggested CSS approach combined with alignment adjustments.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi guys,

I have a page with 2 embedded youtube videos: https://apex86.net/pages/resources

I had to use a “custom liquid” page to achieve dynamic resizing of the videos, using the following code:


<iframe src="https://www.youtube.com/embed/2hHNo9RyPTU" frameborder="0" allowfullscreen=""></iframe>

<iframe src="https://www.youtube.com/embed/vvk5EfhG18E" frameborder="0" allowfullscreen=""></iframe>

My only issue is that there is a huge amount of padding between the videos, which seems to be coming from the bottom of the first container. It seems like simply adjusting the padding-bottom would easily fix this. But, it is clipping the video bottom at the same time as it reduces actual padding.

Any help would be much appreciated!

2

Are these community forums really meant to advertise paid services?

3

Yes, I was definitely hoping to find some help here, in either a link to a resource where I can help myself, or in a code suggestion.

4

Hi Apex,

Use following solutions :

  • Replace padding-bottom ratio hack with aspect-ratio.
  • Reduce or remove margins or gaps causing excessive space.
  • Avoid absolute positioning of videos unless needed.
  • Ensure containers don’t clip content with overflow:visible

Please apply these solutions and let me know if you need more detailed solutions.

1 Like
5

Thank you Steven,

I have been clunking around like a caveman, using your suggestions to guide me. Here is what I have come up with:


<iframe src="https://www.youtube.com/embed/2hHNo9RyPTU" frameborder="0" allowfullscreen=""></iframe>

<iframe src="https://www.youtube.com/embed/vvk5EfhG18E" frameborder="0" allowfullscreen=""></iframe>

This has resolved the crazy amount of padding, but everything is still justified left. I have tried align-items and align-content, but neither are doing the trick. I must be missing something!

:EDIT:

Just needed a

by the iframes