📌 How to Embed 16:9 and 1:1 Videos: Bunny + YouTube Shorts

Hi Fluent Community 👋,

after two weeks of testing and tweaking, we finally figured out how to embed videos from Bunny.net and YouTube Shorts so they display perfectly in the right aspect ratio. We want to share this with you all so nobody else has to struggle with it! 🙌

🔹 1. Bunny.net Embed

👉 Just change the padding-top value depending on the aspect ratio:

• 16:9 → 56.25%
• 1:1 → 100%

16:9 (horizontal)

\

  \<iframe src="https://iframe.mediadelivery.net/embed/ACC/VIDEO_ID?responsive=true"

    loading="lazy"

    style="border:0;position:absolute;top:0;left:0;width:100%;height:100%;"

    allowfullscreen>

  \

\

1:1 (square)

\

  \<iframe src="https://iframe.mediadelivery.net/embed/ACC/VIDEO_ID?responsive=true"

    loading="lazy"

    style="border:0;position:absolute;top:0;left:0;width:100%;height:100%;"

    allowfullscreen>

  \

\

🔹 2. YouTube Shorts (9:16 vertical)

👉 For Shorts, use a custom HTML embed with padding-top:177.7778%.

👉 Replace VIDEO_ID with your YouTube Short ID.

\

  \<iframe

    src="https://www.youtube.com/embed/VIDEO_ID"

    style="position:absolute;inset:0;width:100%;height:100%;border:0;"

    allowfullscreen

    loading="lazy">

  \

\

✨ That’s it! Copy → Paste → Replace VIDEO_ID. Your videos will look clean, full-width, and in the right aspect ratio without ugly black bars.

We hope this saves you hours of trial and error. 🚀