Skip to content
GreenSnippets

Keep media at a fixed aspect ratio

Reserve space for videos and images with aspect-ratio so the page does not jump while loading.

CSS
.video-frame {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #111;
}

.video-frame > iframe,
.video-frame > video {
  width: 100%;
  height: 100%;
}

.thumb {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
}

Example / expected output

Output
<!-- <div class="video-frame"><iframe src="…" title="…"></iframe></div> -->

How it works

The aspect-ratio property replaces the old padding-top hack. Reserving space prevents layout shift (a Core Web Vitals metric). object-fit: cover crops the media to fill the box without distortion.

This snippet has been reviewed but was not executed by an automated test. Test it in your own environment before relying on it.

Related snippets