Preserve video aspect ratio in HTML previews without stretching

To show portrait and landscape video in the same web interface without distortion, separate the player's box from the image inside it. Use aspect-ratio to size the box and object-fit: contain to keep the complete video visible. Choose cover only when cropping is an intentional part of the design.

These are display choices in your application. They do not resize the delivered file, change its codec or create a new media export. Start by deciding whether your viewer must see the whole frame or whether a cropped preview is acceptable.

Choose the viewing rule before changing the source

A review player and a thumbnail grid have different jobs. A reviewer may need to see text near the edge of a recording. A small preview card may prioritize a consistent shape. Reusing the same crop rule for both can hide information at the point where the user needs it most.

The object-fit reference defines the main choices:

Black space around a portrait video inside a wide player is not necessarily a broken download. It may be the expected result of keeping the full image visible. Conversely, a filled card can look tidy while cutting off a face, a screen label or subtitles already burned into the picture.

Give the player a predictable box

This example reserves a 16:9 player area and displays the complete video inside it. Replace /media/review.mp4 with an authorized, playable asset served by your application; this path is a placeholder, not a Tornado endpoint.

<div class="review-player">
  <video controls playsinline preload="metadata"
         aria-label="Source video review" src="/media/review.mp4">
  </video>
</div>

.review-player {
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  background: #111;
}

.review-player > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: 50% 50%;
}

The aspect-ratio documentation explains how a preferred width-to-height ratio participates in sizing. Here, the wrapper's height is automatic and follows its width. The video fills that established box; its picture follows the separate fit rule. The reserved area is available before media metadata arrives.

If your design is a portrait review screen, change the wrapper ratio to 9 / 16. That changes the space allocated in the interface, not the source file. Consider the resulting height on a phone or laptop before choosing one ratio for an entire collection.

Understand what a crop removes

Take a synthetic 1080-by-1920 portrait frame in a 640-by-360 box. With contain behavior, proportional scaling gives an image 202.5 pixels wide and 360 pixels high. The remaining horizontal space belongs to the player background. With cover behavior, the image is scaled to 640 pixels wide and approximately 1137.8 pixels high, so much of its vertical extent falls outside the visible picture area.

Those values are geometry, not a video quality benchmark. A centered crop does not understand the subject. If a preview requires cover, review representative source frames and choose a focal position deliberately. The object-position reference describes positioning the image within its box; it does not provide automatic face or text detection.

Keep a way to open the full-frame player. A crop that works for the first frame can hide the subject later when a camera pans or a presenter moves. Never infer that one acceptable poster image proves the entire clip is safe to crop.

Keep presentation separate from media validation

Use Tornado's job-status reference to follow acquisition and obtain delivery information. Then test playback with the actual file and access path your application uses. A completed remote job does not establish that your CSS or browser decoder is correct.

If the shape is wrong, inspect the delivered file and the browser presentation separately. The resolution inspection guide covers coded dimensions and cautions about rotation and pixel aspect ratio. Do not assume that a raw width-and-height pair always describes the intended display orientation.

If playback fails entirely, changing object-fit will not fix an unsupported codec or expired access. Use the container and codec guide for format problems and the expired URL guide for delivery problems. Preserve the original file while diagnosing the presentation.

CSS cropping also does not produce a cropped downloadable asset. If a downstream tool requires an actual 9:16 file, implement and verify an explicit transformation step. The web player and exported file are separate outputs.

Check the layout with representative content

Test a portrait clip, a landscape clip and a square clip in the same component. Include content near all four edges so an accidental crop is obvious. At narrow viewport widths, confirm that the player does not introduce horizontal scrolling and that the playback controls remain usable.

The exact HTML and CSS above were checked locally in Chromium at viewport widths of 390 and 1280 pixels. The checks verified the wrapper's 16:9 dimensions, the video's matching box, contain mode, centered positioning and absence of horizontal page overflow. They did not decode a real video, verify image pixels, test native controls on every device or establish accessibility compliance. The numerical portrait example was also checked independently.

For release, play your real assets in supported browsers and devices. Check fullscreen behavior, orientation changes and keyboard access to controls. If your application provides text tracks, verify their language selection and timing using the WebVTT delivery guide. Cropping the image is not a captioning strategy.

Build your first Tornado media workflow, retain a representative set of delivered files, and add the full-frame player as your review baseline. Introduce cropped previews only where their loss of image content is intentional and visible to the reviewer.