How to make a responsive video iframe
Updated: November 10, 2026
An iframe with width="560" height="315" looks fine on a computer, but on a phone it overflows or ends up tiny. The fix is to make it take the full available width and calculate its height from the video’s aspect ratio.
The modern way: aspect-ratio
width:100% makes it fill its container and aspect-ratio works out the height. It works in every current browser. For vertical videos, use 9/16 and cap the width (for example max-width:360px).
<iframe src="https://dembed.cc/embed/v_YOUR_ID" title="My video" style="width:100%;aspect-ratio:16/9;border:0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen loading="lazy"></iframe>The classic trick (for very old browsers)
56.25% is 9 ÷ 16: the container reserves a height proportional to its width and the iframe fills it. For 4:3 use 75%; for 1:1, 100%.
<div style="position:relative;padding-top:56.25%">
<iframe src="https://dembed.cc/embed/v_YOUR_ID" title="My video" style="position:absolute;inset:0;width:100%;height:100%;border:0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>Without writing code
- 1Open the embed code generator and paste your video link.
- 2Choose the ratio (16:9, 4:3, 1:1 or 9:16) and “Responsive” as size.
- 3Copy the code and paste it on your site.
Common mistakes
- Keeping fixed width and height on the iframe as well as the style: remove them or the browser may ignore the style.
- A container with a fixed pixel width: the iframe adapts to its container, so the container must be flexible too.
- Forgetting allowfullscreen: the fullscreen button won’t work.
Frequently asked questions
Yes: paste the code into a “Custom HTML” block.