Demo 04: Fluid & Responsive Video

🎯 Three Techniques for Responsive Video

Each approach has its use cases. Modern CSS makes this much easier.

.wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.wrapper video {
  position: absolute;
  width: 100%;
  height: 100%;
}

.wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wrapper {
  container-type: inline-size;
}
@container (max-width: 400px) {
  video { aspect-ratio: 4/3; }
}

Which technique to use?

Use aspect-ratio for modern projects—it's cleaner and has excellent browser support (95%+). The padding-bottom hack is only needed for legacy browser support. Container queries are ideal when video ratio should change based on container size, not viewport.

📐 Common Aspect Ratios

Different ratios for different platforms and content types.

16:9

Standard HD/4K, YouTube

aspect-ratio: 16 / 9;

4:3

Classic TV, Webcams

aspect-ratio: 4 / 3;

21:9

Cinematic Ultra-wide

aspect-ratio: 21 / 9;

1:1

Instagram, Social

aspect-ratio: 1 / 1;

9:16

TikTok, Reels, Stories

aspect-ratio: 9 / 16;

🎨 Object-fit Property

Control how video fills its container when dimensions don't match.

object-fit: cover

Fills container, crops to fit. Best for backgrounds.

object-fit: contain

Shows entire video, may have letterbox. Best for content.

object-fit: fill

Stretches to fill. Usually distorts—avoid for video.

object-fit: none

Native size, clips if needed. Useful for precise positioning.

📝 Complete Responsive Video CSS

Copy-paste ready solution for most use cases.

/* Modern responsive video wrapper */
.video-responsive {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.video-responsive video,
.video-responsive iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: #000;
}

/* For background videos that fill container */
.video-background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Art direction: different ratios for mobile */
@media (max-width: 768px) {
  .video-responsive video {
    aspect-ratio: 4 / 3;
  }

  .video-vertical video {
    aspect-ratio: 9 / 16;
    max-width: 400px;
    margin: 0 auto;
  }
}