Why YouTube Embeds Break Layouts

By default, an <iframe> behaves like an image with fixed dimensions. If you set width="100%", you lose the height aspect ratio, causing the video to look stretched or have huge black bars.

To solve this, we need a way to lock the Aspect Ratio (the relationship between width and height) regardless of how wide the screen is.

Method 1: The “Padding-Bottom” Hack (Most Robust)

This is the method generated by the tool above. It is compatible with all browsers, even very old ones.

• Container: We create a `div` with position: relative and height: 0.
• Padding: We set padding-bottom: 56.25%. Why? Because 9 divided by 16 is 0.5625. This pushes the height of the container to be exactly 56.25% of its width, creating a 16:9 box.
• Iframe: We position the iframe absolute inside the container to fill that padded space completely.

Method 2: The Modern aspect-ratio CSS

Modern browsers (Chrome 88+, Safari 15+) support a cleaner property. If you don’t need to support old Internet Explorer versions, you can simply use:

iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

However, our generator uses Method 1 because it guarantees the video will display correctly on older devices, embedded views in apps, and older WordPress themes.

Supporting YouTube Shorts

YouTube Shorts are vertical videos (9:16 ratio). To embed these responsively, you simply flip the calculation. 16 divided by 9 is 1.77, so you would use padding-bottom: 177.78%. You can select “9:16” in the dropdown above to generate this code instantly.