Why won't my homepage video auto play on laptop but works on mobile?

Store Design

Topic summary

A user encountered an issue where their homepage video autoplays on mobile devices but not on laptops, despite working initially on both platforms. The problem appears related to their video embed code implementation.

Proposed Solutions:

  • Replace iframe embedding with HTML5 <video> tag using attributes: autoplay, muted, loop, playsinline, and preload
  • Ensure video files are properly hosted and accessible
  • Include multiple source formats (MP4, WebM) for cross-browser compatibility

Key Issue:
The user reports that suggested code fixes work in Shopify’s customization preview mode but fail when the store is saved and viewed live.

Alternative Resolution:
Another community member shared a YouTube tutorial (https://youtu.be/HzlKuFE4Ow) that successfully resolved the autoplay issue, with at least one other user confirming this solution worked perfectly for them.

Status: The discussion remains open regarding why the code works in preview but not in production, though a working workaround via external tutorial has been identified.

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

Hi, hoping someone can help me please. I added a video to my homepage yesterday (auto play). This was working fine on computer and mobile, but today it won’t auto play on laptop, but auto plays on mobile. Any idea how I fix this so it auto plays on both? Below is the code I used. Thank you.

{% if template == “index” or template == “page” %}

{% endif %}>
2

Hello @NeuroDepth ,

It seems there is an issue with the way you’ve embedded the video in your Shopify store. To ensure consistent autoplay behavior on both laptops and mobile devices, you can try using the HTML5 video tag directly without the iframe.

Here’s an updated version of the code that you can use:

{% if template == "index" or template == "page" %}
  
{% endif %}

Make sure to replace “https://example.com/path/to/video.webm” and “https://example.com/path/to/video.mp4” with the actual URLs of your video files. Ensure that the video files are accessible and properly hosted on your server or a reliable video hosting platform.

Hope this can help.

Ali Reviews team.

3

Hi @NeuroDepth

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

You can remove the previous code and add this code:

{% if template == “index” or template == “page” %}

{% endif %}>

Regards,

San

4

This works when I am customising store, but once I click save and view store it doesn’t auto play. Any suggestions?

5

Hi, thanks for your help. This works when I’m customising my store, but once I click save the video stops auto playing. Any suggestions?

6

I found an easier solution to this problem via Youtube video, check out this video

1 Like
7

Just wanted to say this worked PERFECTLY for me. That gentleman has some other excellent tutorials also.

Thanks for the tip!