Standard 16:9 resolutions

The 16:9 ratio produces these standard resolutions: 640×360 (nHD), 1280×720 (720p / HD), 1920×1080 (1080p / Full HD), 2560×1440 (1440p / 2K QHD), 3840×2160 (2160p / 4K UHD), and 7680×4320 (8K). These are used across YouTube, streaming services, gaming, and broadcast television. The ratio means for every 16 units of width, there are 9 units of height — a decimal ratio of approximately 1.7778.

/* Common 16:9 resolutions */
/* Width × Height */
 640 × 360    /* nHD */
 854 × 480    /* FWVGA */
1280 × 720    /* HD / 720p */
1600 × 900    /* HD+ */
1920 × 1080   /* Full HD / 1080p */
2560 × 1440   /* QHD / 2K */
3840 × 2160   /* UHD / 4K */

/* Calculate height from width */
/* height = width × 9 / 16 */
const height = Math.round(1920 * 9 / 16); // 1080

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

Using 16:9 in CSS

Use the CSS aspect-ratio property: aspect-ratio: 16 / 9. For responsive video embeds, combine with width: 100% and overflow: hidden on a container. The old padding-top hack (padding-top: 56.25%) still works for legacy browser support, since 9 ÷ 16 = 0.5625 = 56.25%. For images, add object-fit: cover to fill the container without distortion.

When to use 16:9 vs other ratios

Use 16:9 for: YouTube videos, website hero sections, desktop wallpapers, presentations, and any widescreen content. Consider 4:3 for classic presentations or iPad displays, 1:1 for social media posts, 9:16 for vertical mobile video (Stories, Reels, Shorts), and 21:9 for cinematic or ultrawide content.