Why did the autoplay feature for HTML5 videos on my Webflow site stop working on iOS devices?

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 muted attribute 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 playsinline is 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.