How can I adjust custom liquid code for mobile view?

Store Design

Topic summary

A user embedded a custom video on their Shopify page using HTML/CSS in a custom liquid section. The video displayed correctly on desktop but wasn’t resizing properly for mobile devices.

Solution Provided:

  • Adding max-width: 100%; to the video’s CSS style resolved the mobile resizing issue
  • The fix centers the video using margin-left: auto; margin-right: auto; and display: block;

New Issue Emerged:

  • After implementing the fix, the video stopped playing on mobile devices (though it still plays on desktop)
  • The autoplay attribute may be causing problems, as many mobile browsers block autoplay functionality
  • Removing the max-width CSS was suggested to test if styling conflicts were preventing playback

Related Question:
Another user asked about displaying alternative videos with different aspect ratios specifically for mobile viewers within custom liquid code.

The discussion remains open with the mobile playback issue unresolved.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

Hi, so I wanted to have an embeded video on my page but didn’t like how the default looked.

So I’ve added a custom liquid, the video is running how I want it, however it’s not resizing for mobile view (obviously because I haven’t coded it to, and can’t for the life of me find a code that wants to work)

here is the working code:

video { display: block; margin-left: auto; margin-right: auto;} {justify-content: center}
2

@DesignerMum - please add max-width:100%; to the style code, so all code becomes

video
{ display: block;
margin-left: auto;
margin-right: auto;
max-width:100%;}

then clear cache and check on mobile, it should work

2 Likes
3

Yes! that worked. so simple. lol. I’ve been sitting here for hours try to figure it out on my own.

1 Like
4

Actually I’ve just noticed, while it’s resizing for mobile it won’t play on mobile. the video isn’t actually playing on desktop or mobile. I just checked on another device (it was working for me before). Any ideas please?

5

@DesignerMum - size css should not stop it from playing, still please remove that line again and check if it works, else must be some other issue and many times autoplay will not work on mobile browsers

6

Something slightly different here - I have added a custom liquid section with code to display video on homepage but am looking for code so that I can have an alternative video play (different aspect ratio) for those viewing on mobile. Can anyone help?