Aspect Ratio Calculator — 16:9 vs 9:16 Social Export

You exported a 1920×1080 master, dropped it into CapCut for Shorts, and the faces got sliced off. The timeline said “1080p.” The crop said otherwise. Aspect ratio is not a vibe — it is width ÷ height, and every platform silently reinterprets that number when it letterboxes or center-crops your frame.

Ratio → pixels (the only math that matters)

Ratio	Common size	Use
16:9	1920×1080, 1280×720	YouTube, landscape hero
9:16	1080×1920	TikTok, Reels, Shorts
1:1	1080×1080	Feed posts, avatars
4:5	1080×1350	Instagram portrait feed
21:9	2560×1080	Ultrawide banners
4:3	1440×1080	Older talks / slides

height = round(width × (ratioH / ratioW))
width  = round(height × (ratioW / ratioH))

Always round to integers before ffmpeg, After Effects, or a browser canvas encode. Half pixels become soft edges or odd encoder warnings. The aspect ratio calculator is handy when you know one side and need the other before a batch of forty exports.

Odd dimensions (especially non-even heights for some codecs) can also upset H.264. Prefer even numbers for both sides when encoding video.

CSS that matches the export

.video-frame {
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
}

.video-frame > video,
.video-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

aspect-ratio reserves space before media loads (CLS win). For vertical embeds use aspect-ratio: 9 / 16 with max-height: 80vh so phones do not sprout endless scroll.

object-fit: contain letterboxes; cover fills and crops. Marketing heroes usually want cover plus object-position for faces. Player embeds for uncropped film often want contain. Changing the CSS box without shipping a matching asset just zooms harder into the wrong part of a 16:9 file.

Safe zones for vertical social

Social chrome (captions, like buttons, usernames) eats the edges of 9:16. Keep subjects inside the inner ~80% of height; keep titles out of the top ~12% and bottom ~20%. Burned-in subtitles that look fine in the NLE can sit under TikTok’s UI.

Name export presets after the channel:

yt-landscape-1080  → 1920×1080
shorts-vertical    → 1080×1920
ig-feed-portrait   → 1080×1350
ig-square          → 1080×1080

Pull still thumbnails from a vertical master when the destination is vertical. Upscaling a center crop from 16:9 into 9:16 looks soft on mobile OLED.

Why batch jobs go wrong

Auto-reframe tracks motion, not brand safe zones. Better pipeline:

1. Decide primary ratio per channel.
2. Compute exact pixels from the locked long edge.
3. Export dedicated masters (never stretch 16:9 into 9:16).
4. Mirror those numbers in CSS and poster images.
5. Reject uploads in CI if width/height ≠ expected pair.

ffmpeg example for a centered crop to 9:16 from a landscape source (only when you accept losing sides):

ffmpeg -i in.mp4 -vf "crop=ih*9/16:ih,scale=1080:1920" out.mp4

Prefer shooting or editing in the target ratio when faces matter.

Responsive pages without forty media queries

.hero-media { aspect-ratio: 16 / 9; }
@media (max-width: 640px) {
  .hero-media { aspect-ratio: 4 / 5; } /* only if you ship a matching crop */
}

Ask from design	What eng needs
“Make it Instagram”	1:1 or 4:5 + pixel size
“Full bleed hero”	Ratio + object-fit + max-width
“Same video everywhere”	Separate 16:9 and 9:16 files

If someone says “just scale it,” ask which edge is locked and which content is allowed to crop. Ship the math once in presets and CSS — then TikTok stops eating foreheads, and your hero stops shifting layout while the poster loads.