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; }Topic summary
Homepage hero video autoplays and loops on desktop with an HTML5
Key point: Many mobile devices/browsers block video autoplay to protect user preferences and data usage, so behavior can vary by device.
Suggested strategy:
- Use a banner image with a visible play button.
- On user click, embed/load the video via script.
Benefits of the click-to-play approach:
- Better user experience and control.
- Faster initial page load and improved performance scores (e.g., Google PageSpeed Insights, Shopify Analyzer).
Action items:
- Test across multiple phones/browsers to confirm behavior.
- Implement a click-to-play overlay that loads the video after user interaction.
Status: No guaranteed code fix to force autoplay on mobile was provided; the recommended solution is a user-initiated play pattern. The discussion remains open without a confirmed mobile autoplay workaround. The provided code snippet is central to the issue.
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:
-
Has a nice display for the user, customizable by you
-
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