Screen recording aspect ratio: 16:9, 9:16, and the black-bar problem

Black bars are an aspect mismatch, not a style choice#

Those black bands around a video are not a look. They are a receipt for a decision made earlier: the frame you captured is a different shape than the frame you are delivering into, and the player padded the difference. The shape of a video is its aspect ratio, its width-to-height proportion, and at the destination it is a hard constraint. A YouTube player is 16:9. A Reels slot is 9:16. Hand either one a video of the wrong proportion and it does one of three things, all of them yours to prevent: pad it with bars, crop it, or stretch it into distortion.

The direction of the bars tells you exactly which way the shapes disagreed, and the two cases have proper names. When the source is wider than the target frame, the bars run along the top and bottom; this is letterboxing, "the practice of transferring film shot in a widescreen aspect ratio to standard-width video formats while preserving the film's original aspect ratio"⁵. When the source is narrower than the target, the bars run down the left and right instead; that is pillarboxing, the same fit problem rotated ninety degrees. A 16:9 desktop recording dropped into a 9:16 feed letterboxes; a 9:16 phone clip uploaded to a 16:9 YouTube frame pillarboxes. Both are the identical error, a proportion fixed at capture that did not match the one required at delivery. This is the aspect layer of the capture-settings checklist, and its one rule is that the shape is far cheaper to get right before you record than to salvage afterward.

A destination-to-aspect table, with the pixels and not just the ratio#

Most aspect-ratio guides stop at the ratio, and the ratio alone will not let you size a capture window. Here is each common destination with the proportion it demands and the pixel dimensions to render at, taking 1080 as the short side. Halve every number for a 720p deliverable; double it for 4K.

The pixel dimensions follow from the ratio by arithmetic, not from any one vendor: 9:16 at 1080 wide is 1920 tall, 4:5 at 1080 wide is 1350 tall, 1:1 is square at 1080. Two rows earn a footnote. LinkedIn is the shape omnivore, accepting 16:9, 1:1, 4:5, and 9:16 and recommending fifteen to thirty seconds so a clip clears every feed placement³; on a professional feed, a 1:1 or 4:5 cut reads well in-column without committing to full vertical. And 4:5 is the tallest a Meta feed will show before it wants a dedicated Reel, which makes it the efficient middle ground for a mostly-16:9 workflow that needs one taller cut without a second recording. Mobile app-store previews are a separate fixed target, an exact 886 x 1920 for the current iPhone class, covered in the app-preview spec.

Letterbox or crop: the two lossy fixes, applied after the fact#

Once a recording exists at the wrong shape, there are exactly two honest ways to change it, and each charges a fee. Letterbox (or pillarbox) keeps every pixel and pays in wasted frame: the content shrinks into a band and the remainder is padding. Crop keeps the frame full and pays in lost content: you fill the target and throw away whatever fell outside it. The third move people reach for, stretching the source to fit, is not a fix at all; it distorts every proportion in the interface and reads as broken on sight, so leave it off the table entirely.

Which fee stings more depends on how far apart the two shapes are, and the arithmetic of what a 16:9-to-9:16 reframe costs in each direction is worked out in the polish breakdown rather than repeated here. The short version: a landscape-to-vertical reframe is the expensive one whichever way you take it. Letterbox it and the action sits in a thin strip with most of the frame dark. Crop it and you keep a narrow vertical slice of a horizontal layout, which for a desktop UI is usually a sidebar or half a form instead of the thing you set out to show. No reframe from wide to tall keeps both all the pixels and all the content, which is exactly why the reframe is the wrong place to solve the problem.

Record a narrow viewport; don't crop a cropped desktop#

The desktop you record is 16:9 because the monitor is, and a screen recorder captures whatever surface you point it at, in that surface's shape. Cropping that capture to vertical means slicing a tall, thin strip out of a wide layout, and a wide layout puts almost nothing useful in a tall, thin strip. The escape is to stop treating aspect as an export setting and treat it as a capture setting: make the recorded frame the delivery shape before a single frame is written.

For anything with a web surface, that is a window size, not a crop. Set the browser viewport to the target dimensions, 1080 x 1920 for a vertical cut, and record that. The capture is now natively 9:16, full of whatever the app draws at that size, with no bars to pad and no strip to discard. This is the same discipline as sizing the capture to where the video will play rather than to your monitor, applied to shape instead of to pixel count: you choose the frame, then feed it, rather than capturing something arbitrary and rescuing it later.

Why a responsive UI hands you a vertical cut for free#

Shrinking a browser to a phone-width viewport does more than narrow the desktop layout. A responsive web app reflows: the multi-column dashboard collapses into a single stacked column, the top navigation folds into a menu button, side panels drop below the content. That mobile layout is built to fill a tall, narrow screen with real content, which is precisely the frame a 9:16 cut needs. Capture a responsive app at a 1080 x 1920 viewport and you are not cropping a desktop, you are recording the product's own vertical layout, the one it already ships to phones.

The honest exception is a UI that will not reflow. A fixed-width desktop-only app, or a web app with a minimum width that throws a horizontal scrollbar instead of a mobile layout, gives you no vertical arrangement to capture; shrinking its window merely clips it. For those you are back to the two lossy fixes, or to composing the vertical frame on purpose: place the landscape capture in the center and fill the rest with a branded background, a device mockup, or a caption band, so the frame reads as designed rather than padded. Polished recorders lean on this; Screen Studio, for one, offers horizontal and vertical output with export presets that adjust the composition automatically⁶. One more thing to leave room for in any vertical cut: the feed player draws its own controls, caption, and buttons over the lower portion and one edge of the frame, so keep the key action out of the bottom sixth where the platform's UI will sit on top of it.

Aspect becomes a render setting when the viewport is a value#

Notice what changed once the frame is decided at capture. Aspect ratio stopped being an irreversible property of the footage and became an input you can name. If the capture window is a value, one flow can render into 16:9 for the landing page and 1080 x 1920 for the Shorts cut without a second take, because the difference between them is a number rather than a reshoot. That is the whole reason distribution wants one recording cut for every channel, not one shoot per channel: the shapes are re-renders of the same source.

Our own engine, aidemo, is built on that idea: the viewport width, height, and device pixel ratio live in a storyboard, so the same flow renders at 1920 x 1080 or at 1080 x 1920 by changing the output size, and a responsive app reflows into the narrow viewport at capture time instead of getting cropped. The limits are worth stating plainly. aidemo drives a browser and nothing else, so it will not reshape a native desktop or mobile binary; its storyboard is written as code by an agent, not laid out on a visual timeline; and for a single throwaway vertical clip, a point-and-click recorder with a crop box beats writing a spec. What the spec buys is the shape you chose on purpose, reproduced at every aspect your channels ask for, without recording the flow again for each one.

Sources#

1. YouTube — Recommended upload encoding settings (16:9 standard aspect)
2. YouTube — Create Shorts / upload vertical video (up to 1080p, 3 minutes)
3. LinkedIn — Video ad specifications (accepts 16:9, 1:1, 4:5, 9:16)
4. Meta — Ads Guide, video (feed video at 4:5)
5. Wikipedia — Letterboxing and pillarboxing
6. Screen Studio — horizontal and vertical output, export presets

FAQ#

How do I make a vertical 9:16 video from a landscape screen recording?#

Don't crop the landscape capture; a 9:16 slice of a 16:9 desktop keeps a narrow vertical strip of a horizontal layout, usually a sidebar or half a form. Set the capture frame to the target shape first: for a web UI, resize the browser viewport to 1080 x 1920 and record that, so a responsive app reflows into its mobile layout and fills the frame with real content. If the UI cannot reflow, compose the vertical frame on purpose with a background or a device mockup rather than leaving the bars black.

Why does my screen recording have black bars?#

Black bars mean the video's aspect ratio does not match the frame it is playing in, so the player pads the gap. Bars on the top and bottom (letterboxing) mean the source is wider than the target, such as a 16:9 recording in a 9:16 feed; bars on the left and right (pillarboxing) mean it is narrower, such as a vertical clip on 16:9 YouTube. The fix is to record at the destination's shape rather than pad or crop afterward.

What aspect ratio should a screen recording be?#

Match it to where the video plays: 16:9 (1920 x 1080) for YouTube, a landing hero, or docs; 9:16 (1080 x 1920) for Reels, Shorts, TikTok, and Stories; 1:1 (1080 x 1080) or 4:5 (1080 x 1350) for a feed post. LinkedIn accepts all four, so a 1:1 or 4:5 cut is the safe default there. Decide the shape before you record, because changing it afterward costs a lossy crop or letterbox.