What Is Aspect Ratio?

Aspect ratio describes the shape of a video frame as a width-to-height ratio. Almost all standard YouTube videos are filmed and published in 16:9 (widescreen), while Shorts are filmed and published in 9:16 (vertical).

Why it matters for embedding

If a player’s width and height do not match the video’s real aspect ratio, you get black bars or a cropped, stretched picture. A responsive embed keeps the correct ratio at any size by using a percentage-based wrapper (56.25% padding-bottom for 16:9, 177.78% for 9:16) instead of fixed pixel dimensions.

Getting it right automatically

The embed code generator switches its responsive wrapper between 16:9 and 9:16 automatically when you enable Shorts format, so you do not need to calculate the padding percentage by hand.

How aspect ratio is expressed in code

Aspect ratio is usually written as two numbers separated by a colon, describing width relative to height: 16:9 means the width is 16 units for every 9 units of height, regardless of the actual pixel size. This is why a 1280×720 video and a 640×360 version of the same footage share the same 16:9 ratio: both simplify to the same proportion. In CSS, this same idea appears either as a percentage (56.25%, which is 9 divided by 16) used in the classic responsive embedding technique, or directly via the modern aspect-ratio property, written as aspect-ratio:16/9.

A practical example

Picture a photo gallery page mixing regular YouTube videos and Shorts. Using one fixed embed size for both would either crop the vertical Shorts awkwardly into a wide box, or shrink the widescreen videos down to fit a narrow one. The fix is applying the correct aspect ratio per video type: a 16:9 wrapper for regular videos, and a separate 9:16 wrapper specifically for Shorts, each reserving the right shape of space before the video even loads.

Aspect ratio vs. resolution

Aspect ratio and resolution are related but distinct ideas, and mixing them up is a common source of confusion. Resolution is the actual pixel count (1920×1080, for example); aspect ratio is the proportion those numbers reduce to (16:9 in that case). Two videos can share a resolution but different aspect ratios if one has been letterboxed, and two videos can share an aspect ratio at completely different resolutions, a 640×360 preview and a 1920×1080 full version are both 16:9. When building a responsive embed, it is the aspect ratio, not the specific resolution, that determines the wrapper’s proportions; see our responsive embed guide for the implementation details.

Getting the ratio wrong is one of the most visually obvious embedding mistakes, since it produces immediately noticeable black bars or stretched, distorted video, unlike more subtle issues such as a missing privacy parameter.

A quick way to check you have the right ratio before publishing is to preview the embed at both a wide desktop width and a narrow mobile width; if black bars appear at either size, the wrapper percentage does not match the video’s actual shape and needs adjusting.

Frequently asked questions