Responsive Embeds

The problem with fixed-size embeds

The default iframe embed has a fixed width and height (e.g., width="640" height="360"). This works on desktop but overflows on narrow screens. A responsive embed fills its container and maintains the correct aspect ratio at any size.

The padding-top technique (16:9)

Wrap your iframe in a container div and use the padding-top trick to maintain a 16:9 ratio:

<style>
.video-wrap {
  position: relative;
  padding-top: 56.25%; /* 16:9 = 9/16 */
  height: 0;
  overflow: hidden;
}
.video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

<div class="video-wrap">
  <iframe src="https://player.videonest.co/v/VIDEO_ID"
    frameborder="0" allowfullscreen></iframe>
</div>

The 56.25% padding-top value equals 9÷16, locking the container to 16:9 relative to its width.

Common aspect ratio values

• 16:9 (widescreen) — padding-top: 56.25% — standard for most video
• 4:3 (legacy) — padding-top: 75%
• 1:1 (square) — padding-top: 100%
• 9:16 (vertical/portrait) — padding-top: 177.78%

Modern CSS alternative

Modern browsers support the aspect-ratio property, which is simpler:

<style>
.video-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.video-wrap iframe {
  width: 100%;
  height: 100%;
}
</style>

Capping the max width

Without a max-width, the player stretches to fill very wide containers. Add max-width to the wrapper:

.video-wrap {
  width: 100%;
  max-width: 900px;
  margin: 0 auto; /* center it */
  aspect-ratio: 16 / 9;
}