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

Store Design
, , , , ,
1

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?

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

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