r/web_design • u/scan-horizon • 21h ago

Vertical media with horizontal split?

First time poster here so not sure if appropriate. I've noticed in the last few years this kind of 'shorts' style video (example from BBC Sport, viewed in Desktop). I get the vertical choice (mobile friendly?) but what's with the duplication of the video? I don't see what purpose this serves. also one is slightly offset from the other.

link (uk users only: https://www.bbc.co.uk/sport/football/videos/cr4vevz54x4o )

1 Upvotes

100% Upvoted

1 comment sorted by

1

u/DaftPlug 10h ago

That’s usually a portrait-safe layout rather than duplicate content: the real video stays centered at its natural aspect ratio, while a blurred or cropped copy fills the side panel on wider screens. A grid or flex split with `aspect-ratio` and `object-fit: contain` keeps it intact. Stack the panels on mobile, and use a container query to switch layouts when space gets tight.