Solved

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

NeuroDepth
Excursionist
35 2 6

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" %}
 
 
<video playsinline="" loop="" muted="" autoplay="autoplay" preload="" id="vid" width="100%">
 
 
<source src="
 
<iframe 
h=0bd374b918" width="640" height="200" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>.webm" type="video/webm"
 
  </video>
{% endif %}>
 
Accepted Solution (1)
NeuroDepth
Excursionist
35 2 6

This is an accepted solution.

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?

View solution in original post

Replies 6 (6)

AliReviews
Shopify Partner
773 90 354

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" %}
  <video playsinline loop muted autoplay preload id="vid" width="100%">
    <source src="https://example.com/path/to/video.webm" type="video/webm">
    <source src="https://example.com/path/to/video.mp4" type="video/mp4">
  </video>
{% 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.

- Was my answer helpful? Please hit Like or Mark it as solution!
- Ali Reviews - The must-have Shopify app that empowers you to effortlessly collect, display, and manage product reviews.
- Start your FREE trial today!
NeuroDepth
Excursionist
35 2 6

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

SAN_MSWEB
Shopify Expert
893 110 116

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" %}
<video preload loop autoplay muted playsinline id="vid" width="100%">
<source src="your video URL">
</video>
{% endif %}>

 

 

Regards,

San

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

NeuroDepth
Excursionist
35 2 6

This is an accepted solution.

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?

topnewyork
Trailblazer
247 26 35

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

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
amsignsigcorp
Visitor
1 0 0

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

Thanks for the tip!