Why did the autoplay feature for HTML5 videos on my Webflow site stop working on iOS devices?
TL;DR
- Mute the video by removing its audio track or setting the
mutedattribute. - Use MP4 (H.264 codec) to ensure compatibility.
- Add
playsinlineto prevent iOS from blocking autoplay. - Check Webflow’s background video settings to ensure it's muted and in MP4 format.
- Disable lazy loading if it's delaying autoplay.
The autoplay feature for HTML5 videos on your Webflow site may not be working on iOS devices due to Apple’s restrictions and browser policies. Here’s why this happens and how to fix it.
1. Ensure the Video Has No Audio
- iOS prevents autoplaying videos with sound unless the user interacts.
- If your video has audio, remove the audio track or set
mutedattribute in Webflow's video settings. - Example: Ensure the video tag includes
muted(you can check this in your embed settings).
2. Use the Correct Video Format
- MP4 (H.264 codec) is generally preferred for better compatibility.
- Ensure the file isn’t overly large, as large files may not preload properly.
3. Add playsinline Attribute
- iOS may block autoplay unless
playsinlineis enabled. - If you're using custom HTML, add
playsinline, for example: <video autoplay muted playsinline>- In Webflow, ensure your Embed Code includes this attribute if using a custom video element.
4. Check Webflow’s Background Video Element
- If you're using Webflow’s built-in background video component, it only supports MP4 and must be muted.
- Try replacing the video with a muted version and re-uploading.
5. Adjust Lazy Loading Settings
- Webflow may lazy-load media by default. Check video load settings to ensure it doesn’t delay autoplay.
- Try disabling lazy load if you're using a custom embed.
Summary
To fix HTML5 video autoplay on iOS, ensure your video is muted, encoded in MP4, includes playsinline, and is properly configured in Webflow. If issues persist, test your setup on another device or use a different embedding approach.