RWD Videos

RWD Videos

Responsive video means the video scales with the container while keeping its aspect ratio (like 16:9).

Modern Method (aspect-ratio)

.video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video iframe,
.video video {
  width: 100%;
  height: 100%;
  display: block;
}

Wrapper Method (Fallback)

.video-wrap {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
}

.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

Summary

• Use aspect-ratio for the cleanest responsive video embeds.
• Use the wrapper method if you need a fallback approach.
• Always make embeds scale to container width.