Why won't my homepage video play on mobile devices?

2 0 0



i have a video on my homepge that ive managed to get to auto play and loop using the below code, but it doesnt play on mobile?


am i missing something?


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



<video autoplay="autoplay" loop= "loop">

<source src="https://cdn.shopify.com/videos/c/o/v/2f00713f9ffd4526ac8f685c84bdf7a5.mp4" type="video/mp4">
<source src="https://cdn.shopify.com/videos/c/o/v/2f00713f9ffd4526ac8f685c84bdf7a5.mp4" type="video/ogg">
Your browser does not support the video tag.


Reply 1 (1)

Shopify Expert
2228 203 593

It's common for devices to prevent auto play on videos, to respect the user's preferences and data plan.


You could try testing different phones / devices, it might play on some but generally they stop it to prevent the user from having to make unexpected large data transfers.


Knowing that, a strategy I like to use:

- Create a nice banner image with a play button on it

- After user clicks play, trigger a script to embed the video


This does a couple things:


1) Has a nice display for the user, customizable by you


2) Doesn't load the video code on page load, making your pages to load faster (has lots of benefits) + give you better scores on tools like Google PageSpeed Insights or the Shopify Analyzer

• Creator of Order Automator (automate tagging, fulfillment, Amazon, notifications + more)
• Shopify developer for 10+ years, store owner for 7 years
• I also make guides like Shopify Automation Tips and How to Deal with Fraud / Chargebacks