Main issue: The homepage video plays in desktop and in browser mobile emulation, but does not play on real mobile devices. Size/width was ruled out as the cause.
Suggested fix: Add video tag attributes autoplay, loop, muted, and playsinline. “playsinline” enables inline playback on mobile browsers (not forcing fullscreen) and is commonly required for muted autoplay on iOS.
Update from another merchant (Emporium theme): Same symptom—desktop works, phones don’t. They added the suggested attributes inside video.liquid, but the video still doesn’t play. Their snippet includes controls, controlslist=“nodownload”, preload=“metadata”, title, data-video-target, and autoplay loop muted playsinline.
Artifacts central to understanding: The provided
Status: No confirmed resolution yet; the mismatch between devtools emulation and real devices persists.
Open questions: Whether theme-specific scripts/settings or mobile browser policies are preventing autoplay despite the attributes; whether additional adjustments to the video markup are needed.
Hello, I am using the Shopify Emporium theme and I encountered the same problem. It is seen on the computer and the video works. But on the phone, the videos do not play and do not work. I wrote the code you said in the
<video
controls
controlslist=“nodownload”
preload=“metadata”
title=“{{ section.settings.video_description | escape }}”
data-video-target
autoplay loop muted playsinline