Video aspect ratio for pc and mobile

Store Design
,

Topic summary

A user is struggling to display product page videos optimally across devices. They have two video formats: 16:9 for desktop and 9:16 for mobile.

The Problem:

  • Using 16:9 video: acceptable on desktop but too small on mobile
  • Using 9:16 video: excellent on mobile but excessively large on desktop
  • Previous code solutions from other posts haven’t resolved the issue
  • Image uploads to the forum are failing with a technical error

Proposed Solution:
A community member (Moeed) suggests creating two separate sections—one for desktop, one for mobile—each containing the appropriate video format. They offer to provide custom code to display videos conditionally based on device type.

Current Status:
The original poster has shared both video files via external links (Streamable) and screenshots (Imgur) for reference. They’re awaiting specific instructions on where to create the sections and implement the dual-video approach. The discussion remains open with no resolution yet implemented.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hi, need some help.

I’m trying to display a video on my product page.

I got the video in 2 formats, 16:9 (for desktop), 9:16 for mobile.

When I use the 16:9, it looks okay ‘‘ish’’ on desktop but too small on mobile and when I use the 9:16, it looks great on mobile but waaaaay too big on desktop.

I’ve tried some of the code adjustments I’ve seen on other post, but non seems to make any decent difference for my case.

I’ve got pictures to better show the 4 scenarios but i’m getting the following message:

‘‘Uploading Untitled1.png resulted in the following error: TypeError: Cannot read properties of null (reading ‘message’)’’

https://imgur.com/a/iCWpsMr

I upload them here (hope this doesn’t breach any guidelines lol

Anyways, i’d like my video to be optimize for mobile, but to display better on desktop too.

Help :)))

1 Like
2

Hey @BeeGreenLife

Can you create two sections and then add videos on those both section, one for desktop and one for mobile then I can provide you a code to display the video accordingly as per the device. Once done then share your store url and password if enabled.

Best Regards,

Moeed

3

Hi, How are you doing?

4

Sorry, you’ll have to be more specific. Where do you want me to create the sections and upload the videos?
Here are both videos:

9:16
https://streamable.com/2eznlm

16:9

https://streamable.com/dn2jk3

and again, see images for reference: https://imgur.com/a/iCWpsMr

I’d like to use you one video that displays as close as possible to the 9:16 on mobile, and the 16:9 on desktop.