A bare iframe has a fixed pixel size, which looks wrong on mobile or in any layout that resizes. The responsive wrapper uses a classic CSS technique to keep the player at the right aspect ratio while the width adjusts to its container.
The snippet
<div style="position:relative;padding-top:56.25%;">
<iframe
src="https://videoplayer.ai/embed/your-slug"
style="position:absolute;inset:0;width:100%;height:100%;border:0;"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
></iframe>
</div>
The outer <div> reserves vertical space proportional to the aspect ratio. 56.25% of the width gives a 16:9 ratio. The iframe fills the box absolutely.
Other aspect ratios
| Aspect ratio | padding-top value |
|---|---|
| 16:9 | 56.25% |
| 4:3 | 75% |
| 1:1 | 100% |
| 9:16 (vertical) | 177.78% |
| 21:9 (cinematic) | 42.86% |
If you forget the wrapper, the iframe collapses to whatever default the browser picks (often 150 pixels tall) and looks broken.
Modern alternative
In modern browsers you can drop the wrapper math and use aspect-ratio directly:
<iframe
src="https://videoplayer.ai/embed/your-slug"
style="width:100%;aspect-ratio:16/9;border:0;"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
></iframe>
This works in browsers from the last few years. Use the padding wrapper if you need to support older browsers.