Why did the autoplay feature for HTML5 videos on my Webflow site stop working on iOS devices?
TL;DR
- Ensure HTML5 videos are in MP4 (H.264), include autoplay, muted, and playsinline attributes, and avoid lazy loading if the video is in the viewport.
- Use Webflow’s Background Video component for silent videos, as it auto-applies necessary attributes and supports autoplay on iOS.
Autoplay for HTML5 videos on iOS devices can stop working due to specific browser and platform restrictions introduced by Apple, especially around mobile Safari.
1. iOS Autoplay Restrictions
- iOS requires muted video for autoplay to work. If your HTML5 video has audio and isn’t muted, it won’t autoplay.
- Autoplay works only for videos with the muted, playsinline, and autoplay attributes.
- Safari on iOS aggressively blocks autoplay to conserve bandwidth and prevent unexpected audio.
2. Ensure Correct Video Attributes
Make sure your video element includes all of the following:
- autoplay
- muted
- playsinline
- loop (optional, but often included)
You can set these in Webflow Designer by selecting the video element and enabling these attributes in the Element Settings panel.
3. Use the Background Video Element if Appropriate
- Webflow’s Background Video component automatically includes appropriate attributes for autoplay on all devices.
- It’s limited to 30MB files and does not include audio, making it ideal for silent looping backgrounds.
4. Check the Video Source Format
- Use MP4 encoded with the H.264 codec, which is supported across all iOS devices.
- Avoid formats like WebM, which aren’t supported by Safari.
5. Avoid Lazy Loading for Critical Videos
- If your video displays within the viewport on page load, ensure it’s not delayed by lazy loading settings, which may interfere with autoplay behavior.
Summary
HTML5 video autoplay stops working on iOS if the video isn’t muted or lacks required attributes like playsinline. To restore autoplay, ensure the video is muted, uses correct attributes, and is in an iOS-compatible format like MP4. Use Webflow’s Background Video component for better mobile consistency when audio isn’t required.