Video Banner doesn't play on mobile only, works fine on desktop

Technical Q&A

Topic summary

A video banner autoplays and loops correctly on desktop and iPhone 16, but fails on iPhone SE and iPhone XR—displaying only a static frame with a non-functional play button.

Root cause identified:
iOS Safari requires videos to be both muted and include the playsinline attribute for autoplay to work, especially on older devices.

Recommended solutions:

  • Add muted and playsinline attributes to the <video> tag:
    <video autoplay muted loop playsinline>
  • For YouTube embeds: add 'mute': 1 to playerVars in the script
  • Ensure video is encoded as MP4/H.264 (older iPhones don’t support HEVC)

Fallback option:
If older iOS versions still block autoplay after these changes, consider using a static background image for mobile devices.

The issue remains unresolved pending implementation of suggested fixes.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
1

Hello! Instead of an image banner, i use a video banner on my homepage. I used this code to implement it into my website: video banner - Pastebin.com
I would want it to autoplay, and loop, and it does exactly that on desktop, and even though for some reason on my phone it works perfectly as well (iPhone 16), I’ve tried two other phones (iPhone SE and iPhone XR) on which neither does it autoplay or loop, it also doesn’t even start. A low resolution frame of the video is displayed instead with a play button in the middle, which even if you click the video doesn’t start. Could anyone please help me fix this? Thanks so much in advance.

crescent.hu

Pw: theaba

2

Hi, this is a common limitation with iOS Safari — especially on slightly older iPhones. A few things to check:

  • Autoplay on mobile → Safari will only allow autoplay if the video is both muted and has the playsinline attribute. Without those, iOS forces the video to wait for a user interaction.

  • Code update → In your 

<video autoplay muted loop playsinline>
  <source src="{{ 'your-video.mp4' | asset_url }}" type="video/mp4">
</video>

The key part is muted playsinline.

File format / encoding → Ensure your video is MP4/H.264 encoded — older iPhones won’t play certain encodings (HEVC for example) without conversion.

Poster frame issue → The play button overlay you see is Safari’s default behavior when autoplay fails. After adding the attributes above, that should disappear.

:backhand_index_pointing_right: Quick fix: re-encode your video to MP4/H.264 (if not already), then update your

If after that the SE/XR still won’t autoplay, you may need to provide a mobile fallback (e.g. background image) since older iOS versions are stricter with autoplay.

3

Hello,

On mobile, you need to mute the audio for autoplay to work. You can do this by adding 'mute': 1 to your playerVars or by updating your script to trigger player.mute();

playerVars: {
‘playsinline’: 1,
‘controls’: 0,
‘disablekb’: 1,
‘iv_load_policy’: 3,
‘modestbranding’: 1,
‘rel’: 0,
‘autoplay’: 1, // ensure autoplay
‘mute’: 1 // explicit mute
},

Regards,
KiwiUp Dev Team