Video Aspect Ratios — 16:9, 4:3, 21:9, and Embed Best Practices

Video aspect ratios affect how content displays across screens. 16:9 is universal for web; 9:16 for social/vertical; 21:9 for cinematic widescreen. Embedding videos responsively requires CSS tricks to maintain the correct ratio.

Use the Aspect Ratio Calculator to calculate dimensions for any video ratio.

Standard video aspect ratios

Responsive YouTube embed

The classic approach uses a wrapper div with padding-top: 56.25% (= 9/16 × 100):

<!-- Old technique — still works: -->
<div class="video-wrapper">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID"
    frameborder="0" allowfullscreen></iframe>
</div>

.video-wrapper {
  position: relative;
  padding-top: 56.25%;  /* 16:9 ratio: (9/16) × 100 */
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Modern CSS approach with aspect-ratio

/* Modern, simpler: */
.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-container iframe {
  width: 100%;
  height: 100%;
}

/* For 21:9 cinematic: */
.cinematic {
  aspect-ratio: 21 / 9;
}

/* For vertical video: */
.vertical-video {
  aspect-ratio: 9 / 16;
  max-width: 400px;  /* Prevent it from being too wide */
}

HTML5 <video> element

<!-- Video tag maintains aspect ratio automatically: -->
<video controls width="800" height="450">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser doesn't support HTML5 video.
</video>

<!-- Always set width and height attributes to prevent CLS: -->
<!-- Browser reserves space before video loads -->

<!-- Full-width responsive video: -->
<video controls style="width: 100%; height: auto;">
  <source src="video.mp4" type="video/mp4">
</video>

CSS for different video ratios

/* Calculate padding-top for any ratio: */
/* padding-top = (height / width) × 100 */

/* 16:9 → 9/16 × 100 = 56.25% */
.ratio-16-9 { padding-top: 56.25%; }

/* 4:3 → 3/4 × 100 = 75% */
.ratio-4-3 { padding-top: 75%; }

/* 21:9 → 9/21 × 100 = 42.86% */
.ratio-21-9 { padding-top: 42.86%; }

/* 1:1 → 100% */
.ratio-1-1 { padding-top: 100%; }

/* With aspect-ratio property (modern): */
.video {
  aspect-ratio: 16/9;  /* no padding trick needed */
}

Object-fit for video fills

/* Cover: video fills container, crops excess */
video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Common use: hero background video */
.hero-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
}

Calculate video dimensions

function videoDimensions(ratio, knownDimension, value) {
  const [w, h] = ratio.split(':').map(Number);
  if (knownDimension === 'width') {
    return { width: value, height: Math.round(value * h / w) };
  }
  return { width: Math.round(value * w / h), height: value };
}

videoDimensions('16:9', 'width', 1920)  // { width: 1920, height: 1080 }
videoDimensions('9:16', 'height', 1920) // { width: 1080, height: 1920 }
videoDimensions('21:9', 'width', 2560)  // { width: 2560, height: 1097 }

Related tools

• Aspect Ratio Calculator — calculate dimensions for any ratio
• CSS Aspect Ratio Guide — CSS aspect-ratio property
• Aspect Ratio in Photography — photo crop ratios