Product page video is not working on phone / smaller devices. Autoplay and click not working

Technical Q&A

Topic summary

Product video autoplays on desktop via custom JavaScript, but on phones/smaller screens it neither autoplays nor starts on tap.

  • Implementation: Controls were removed in the product thumbnail Liquid. A script was added in theme.liquid to force autoplay/loop because the built‑in autoplay/loop didn’t work.

  • Mobile symptoms: The video appears as a static thumbnail/button; controls are hidden and tapping doesn’t start playback. The shared code snippet only shows a Liquid if-block (no actual JS shown). An image was attached.

  • Requests/inputs: A participant asked for the store URL to inspect context. Another referenced Chrome’s autoplay policy (especially blocking autoplay when audio is present or without user interaction), which could explain mobile behavior.

  • Desired behavior: Looping, automatic playback on page load, similar to the provided example link.

Outcome/status: No solution yet. The thread is awaiting the store URL and further details. Key open question: what in the current setup (and browser autoplay policies) is preventing mobile playback and interaction.

Summarized with AI on January 13. AI used: gpt-5.
1

Okey, So I added a video to my product.
I then changed the controls to fales in the product thumbnail liquide file. That removed the controls from the video as I want.

I then put a javascript inside the themes.liquide file to make the vide auto play because of some reason “autoplay and loop” is not working automatically.

So issue: For some reason the video works great on a desktop, works great with the autoplay from javascript etc. But when on a phone or smaller screen, it seems like the thumbnail becomes a button?? I cant figure out why its not playing on a smaller screen, and why I cant click to start it even.

This is the code :

{% if template contains "product" %}

    
{% endif %}

46855004463_0-1699400030608.png
46855004463_0-1699400030608.png1964×666 73.9 KB

2

Can you share your store url so I can get the context of the issue?

3

If there is also audio autoplay with is an user annoyance and requires user interaction.

https://developer.chrome.com/blog/autoplay/

4

Hey the issue is simple. I added a video for the product. When adding a product to shopify you can chose to add a video. With that I changed so that the video will start playing automatically with the javascript. Also I added so that the controllers are not visible. All works great on computer but when on phone the video is not starting. Its like the “image” for the video is a thumbnail with no start button because the controlls are hidden. All I want basically is that the video is rolling on loop and and automatically when you enter the page.

like on this website example : https://looplasso.com/products/looplassov3-bbundle