How can I auto-play my product page video?

Shopify Discussion

Topic summary

A user embedded a custom video on their Shopify product page but it displayed a black thumbnail with a play button instead of auto-playing.

Initial Solution:

  • Add autoplay="true" attribute to the <video> tag
  • This resolved the issue on desktop

Mobile Autoplay Issue:

  • The video still wouldn’t autoplay on mobile devices
  • Chrome and most mobile browsers block autoplay unless videos are muted

Working Solution:

  • Add both autoplay and muted attributes to the video tag
  • For mobile compatibility, include playsinline attribute
  • Example: <video muted autoplay playsinline loop>

Key Technical Detail:
Browser autoplay policies require videos to be muted for autoplay to function, particularly on mobile devices. A reference to Chrome’s autoplay policy documentation was provided for additional context.

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

Hello, I insert my own video in the product page.

But the video doesn’t automatically start in the product page. There is a black tumbnail with play button.

What is the problem? How could

2

Hello @Kremena_Sarieva , in order to play the video automatically, you’ll need to add autoplay property to true in tag.

Simply add autoplay=“true” in your video tag.

If you’re using the liquid tag. Please use it as below.

{{ section.settings.video_1 | video_tag, autoplay: true}}

1 Like
3

Thank you for the reply. Where should I add exactly?

4

Hello @Kremena_Sarieva , you simply need to add this in video tag, as below.

Regards,

Osama Farooqi

1 Like
5

Thank you very much! I’m happy. On desktop version is OK, but on mobile version does not play automatically. Is there anything to add for mobile?

6

Please confirm if you add autoplay to the video tag used for mobile.

1 Like
7

I don’t know where is the tag for mobile.

8

hi @Kremena_Sarieva ,

Chrome does not allow autoplay if the video is not muted.

So to autoplay video you need to set both autoplay and muted attribute.

Here is the link for more details related to mobile

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

Here is the sample:

1 Like
9

Here’s what worked for me:

video { width: 100%; height: auto; display: block; margin: 0 auto; autoplay: true; }