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

SonderApparel
Visitor
2 0 0

hi, 

 

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?

 


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


}
</style>


<html>
<body>


<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.
</video>

</body>
</html>

Reply 1 (1)

JoesIdeas
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