Why won't my custom video play on iPhone devices?

Shopify Discussion
,

Topic summary

Issue: A custom video section in a Shopify store plays correctly on desktop browsers and Android, but does not start on iPhone (iOS). The posted code shows a

Key points raised:

  • One response suggests the problem is likely autoplay being blocked by some devices/browsers for data-saving and user-experience reasons. They recommend sharing the site URL and reproduction steps if it’s a different bug so a developer can inspect.
  • The original poster remains confused why the issue appears only on iPhone.
  • Another participant disputes that this is “normal,” arguing iOS represents a large share of traffic, autoplay matters for results, and webm videos are significantly smaller than MP4s. They note they are still seeking a fix and have not found a solution.

Status: Conflicting views on whether iOS autoplay blocking is expected behavior. No concrete fix or consensus provided. Action item suggested: provide a URL and steps to reproduce for further debugging. Unresolved and ongoing.

Summarized with AI on February 2. AI used: gpt-5.
1

Hy!

I have a a little problem for a few days. I’m set my video section through custom content in shopify store. Code of custom content share below. Video is full responsive on browser and android devices but its only not start on iPhone devices, Cab some one help me to solve this problem

.rte{ } .ovverlay { display: flex; align-items: center; justify-content: center; position: absolute; z-index: 1; right: 0; bottom: 0px; left: 0; margin-bottom: 50px; } .Aut { margin-bottom: 0px important; } .ovverlay button { background: #fff none repeat scroll 0 0; font-size: 20px; color: black; font-weight: 600; mix-blend-mode: overlay; padding: 15px 40px; text-align: center; max-width: 100%; } @media screen and (max-width: 600px) { .Aut { background-color: #FFFFFF; } .ovverlay button { top: 0; right: 0; bottom: 0; left: 0; padding: 10px 40px; justify-content: center; align-item: center; font-size: 15px; } .ovverlay { justify-content: center; align-items: middle; padding: 5px 40px; } }

plz inform me ASAP

2

If you’re talking about auto-play not happening, that’s normal behavior. Some devices / browser restrict auto play for a couple reasons:

  • For people that don’t have unlimited data, auto playing videos loads huge files that eat up their data, so preventing that prevents them from losing data in their plan

  • Auto play is annoying to many people

If you’re talking about something else, a bug that requires inspection of your site, you’ll want to share your url and how to recreate the bug. Then a developer can inspect it.

1 Like
3

thanks for your reply and precious time but I have still a little bit confusion. Why video not only AutoPlay on iPhone devices.

4

It’s not a ‘normal’ thing. IOS makes up half of web traffic, so autoplay not working on IOS is a major issue. Additionally, webm auto videos take up about 15% of typical Mp4s, so my 30sec video takes up 6mb. Finally, it doesn’t matter if ‘autoplay is annoying to people’, it gets results.

I’m still trying to fix the issue, but there doesn’t seem to be a solution

1 Like