Vertical video on desktop: a UX problem most brands ignore

The geometry of the problem

Take a common desktop content slot: 1200 px wide at 16:9, so 675 px tall. A 9:16 clip has a width of 9/16 of its height. There are only two ways to put it in that slot, and both lose.

Fit by height (object-fit: contain). The clip is 675 px tall and 380 px wide. It fills 32% of the slot's width and leaves 820 px of empty bars, which is the "narrow strip in a sea of white" effect.

Fill by width (object-fit: cover). The clip is scaled to 1200 px wide, which makes it 2,133 px tall, and the slot shows a 675 px band from the middle. That is 32% of the frame height. In a typical customer clip the face is at the top and the product is in the hands at the bottom, so the crop removes both.

The last bar is the whole fix in one line: stop putting portrait media in landscape boxes. Everything below is a way of doing that without wrecking the rest of the page layout.

Why teams do not notice

UGC is moderated and approved in dashboards and phone previews, and PDP changes are usually signed off on a laptop at the default breakpoint a designer used. A clip that looks natural on a phone is judged to be fine, and the desktop PDP at a wide window is simply not in anyone's review path. Merchandisers who open their own PDP on a large monitor tend to spot it within seconds, which is the argument for adding that step to the release checklist rather than hoping somebody stumbles on it.

Desktop still deserves the check even where mobile dominates sessions. Shoppers use the two devices differently (see mobile vs desktop social proof patterns), and a block that looks broken on a large screen undermines the very evidence it was placed there to show. The reverse case, why the same content often converts better on phones, is in why UGC converts better on mobile.

Five layout patterns that work

The portrait row is the default on most storefronts for a reason: it uses the extra desktop width for more evidence instead of for empty bars. Carousel-style layouts that render full-height portrait cards are built for exactly this, and it is worth comparing the options in a widget layout gallery on a wide screen before choosing. Placement choices on the page itself are covered in where to place shoppable video, and the mobile side of the same design problem in mobile-first shoppable video design.

The CSS that implements it without layout shift

Two properties do most of the work. aspect-ratio gives the box its portrait shape before any video metadata arrives, so the browser reserves the space and nothing below jumps when the clip loads, which protects Cumulative Layout Shift. object-fit decides whether the video is letterboxed or cropped inside that box. Capping the height relative to the viewport stops a portrait player from running off the bottom of a short laptop screen.

/* Portrait card that never becomes a strip or a crop */
.ugc-portrait {
  aspect-ratio: 9 / 16;          /* reserve space before load */
  height: min(80vh, 720px);      /* fits a 768px-tall laptop */
  width: auto;
  background: #000;
}
.ugc-portrait video {
  width: 100%;
  height: 100%;
  object-fit: contain;           /* never crop the product */
}

/* Row of portrait cards on wide screens */
.ugc-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(28vw, 320px);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

If the video is part of a shoppable widget rather than your theme, check how the widget handles this before writing overrides. The questions to ask are whether it serves a different rendition by viewport, whether cards keep their native ratio at wide breakpoints, and whether off-screen clips are loaded only when needed, the performance side of which is in Core Web Vitals and UGC widgets.

A desktop QA checklist for vertical placements

1. 1Open the PDP at 1280, 1440 and 1920 px wide. At each width, note what share of the video slot is empty bars and whether any clip is cropped.
2. 2Repeat at 125% zoom, or with 125% display scaling, which is common on Windows laptops.
3. 3Check a clip where the product is at the bottom of the frame. If it disappears, the slot is using object-fit: cover on portrait media.
4. 4Scroll past the block while the video loads. If content below jumps, the box has no reserved aspect ratio.
5. 5Open the lightbox or modal with a keyboard only: it should receive focus, close with Escape and return focus to the tile.
6. 6Read the captions at the narrowest column width you ship. If they wrap to three lines over the product, widen the column or reduce caption size.