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

Topic summary

  • 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.

Summarized with AI on December 25. AI used: gpt-5.

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