A YouTube embed with a fixed width and height looks fine on the screen you built it on and breaks on every other one. Here is how to make it scale properly instead.

The problem with fixed sizing

YouTube’s default embed code sets a literal pixel width and height, for example 560 by 315. On a large desktop monitor that might look small; on a narrow phone screen it can overflow the page entirely, forcing a visitor to scroll sideways. Neither is a good experience.

The padding-bottom technique

The standard fix wraps the iframe in a container sized using a percentage-based padding-bottom instead of a fixed height, and positions the iframe absolutely to fill that container:

<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">
  <iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe>
</div>

The 56.25% comes from dividing 9 by 16, the standard video aspect ratio. Because the container’s width is set to 100% of its parent, and its height is calculated as a percentage of that width, the box keeps a perfect 16:9 shape no matter how wide the surrounding page is.

The Shorts version

Vertical videos, like YouTube Shorts, use the opposite ratio. Swap the padding-bottom to 177.78% (16 divided by 9) and the same technique keeps a correct 9:16 shape instead.

A simpler modern alternative

Current CSS supports the aspect-ratio property directly, which can replace the padding-bottom trick on browsers that support it:

<div style="width:100%;aspect-ratio:16/9;">
  <iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" style="width:100%;height:100%;border:0;" allowfullscreen></iframe>
</div>

It is shorter and easier to read, though the padding-bottom method remains the safer default if you need to support older browsers.

Testing it properly

Resize your browser window narrower and wider while the embed is on screen (or use your browser’s device toolbar to simulate a phone) and confirm the player scales smoothly with no black bars, no overflow and no stretching. This is exactly the kind of check worth doing before publishing any page with an embedded video.

Skip the manual CSS

Our embed code generator outputs a correctly proportioned responsive wrapper automatically, including the 9:16 version for Shorts, so you do not need to remember these percentages yourself.