What Is Responsive Design?

Responsive design means a web page’s layout adjusts to fit the screen it is being viewed on, from a small phone to a large desktop monitor, rather than staying a fixed size. Applied to video, it means the player scales with its container instead of always rendering at one fixed pixel width and height.

The padding-bottom technique

The most common way to make an embed responsive is to wrap the iframe in a container with a percentage-based padding-bottom (56.25% for 16:9 video), and position the iframe absolutely inside it at 100% width and height. This keeps the aspect ratio correct at any container width.

A newer alternative

Modern CSS also supports the aspect-ratio property directly, which achieves a similar result with less markup on browsers that support it. See the full responsive embed guide for working examples of both approaches.

The two main techniques for responsive video

Responsive video sizing is generally achieved one of two ways. The older, more broadly compatible technique wraps the iframe in a container using a percentage-based padding-bottom (56.25% for 16:9 video) combined with absolute positioning, a trick that has worked reliably since responsive design became common over a decade ago. The newer technique uses the CSS aspect-ratio property directly on the container, which is shorter to write and easier to read, at the cost of depending on a CSS feature not supported in some considerably older browsers.

A practical example comparing both techniques

<!-- Padding-bottom technique -->
<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">
  <iframe src="..." style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"></iframe>
</div>

<!-- aspect-ratio technique -->
<div style="width:100%;aspect-ratio:16/9;">
  <iframe src="..." style="width:100%;height:100%;border:0;"></iframe>
</div>

Both produce the same visual result on modern browsers; the choice mainly comes down to how much legacy browser support your audience requires.

Responsive design vs. fixed-size embedding

A fixed-size embed, using literal width and height attributes, is simpler to write but breaks down the moment the surrounding page is viewed on a screen narrower than that fixed width, either overflowing the layout or requiring horizontal scrolling. Responsive design trades a small amount of setup complexity for an embed that works correctly across the full range of screen sizes visitors actually use, which is why it is the recommended default for essentially all modern websites. See our full responsive YouTube embeds guide for worked examples including the Shorts-specific 9:16 variant.

Testing across a real range of device widths, not just resizing a desktop browser window slightly, remains the most reliable way to confirm a responsive embed actually behaves correctly for the full range of visitors a typical website receives, from small phones to large external monitors.

Frequently asked questions