Is there a way to add custom code in Webflow to fix the issue of a play button appearing on the screen instead of autoplay for a background video in Safari and low power mode?

Safari's autoplay restrictions and iOS Low Power Mode often prevent videos from autoplaying, replacing them with a visible play button instead. There are workarounds, but limitations are imposed by the browser and OS.

1. Understand Safari and Low Power Mode Restrictions

• Safari only allows autoplay of muted videos.
• Videos will not autoplay at all in iOS Low Power Mode or macOS battery-saving scenarios, regardless of code.
• If a video refuses to autoplay, Safari will display the native play button overlay, and this can't be removed via code in some cases.

2. Use Webflow’s Background Video Element Correctly

• Webflow’s Background Video component is automatically muted, looped, and set to autoplay.
• For Safari, ensure the video is MP4 format, under 30 MB, and hosted via Webflow’s Background Video settings.
• It’s not subject to the same rules as an HTML5 video element, but iOS Safari restrictions still apply.

3. Hide Play Button and Force Muted Autoplay via Custom Code

If you’re seeing a play button, you're likely using a custom HTML video element. Use this snippet in Before Tag under Page Settings or Site Settings > Custom Code:

• Make sure your video has the attributes muted, autoplay, playsinline, and loop.
• Then add this JavaScript to ensure it's muted and starts playing:

document.addEventListener("DOMContentLoaded", function () {  const video = document.querySelector("video");  if (video) {    video.muted = true;    video.autoplay = true;    video.playsInline = true; // especially important for iOS    const playPromise = video.play();    if (playPromise !== undefined) {      playPromise.catch(error => {        // Autoplay not allowed        video.controls = false; // hide native controls/play button      });    }  }});

Note: Don't expect this to override iOS Low Power Mode or Safari’s hard limitations.

4. Provide a Fallback for Non-Autoplaying Cases

Since nothing can force Safari/iOS to autoplay in Low Power Mode, a common fallback is:

• Use a static image or hero section background for mobile only.
• Use CSS media queries or Webflow’s device visibility settings to hide video block on mobile and show an image instead.

Summary

Webflow's native background video is optimized for autoplay but can't override iOS Low Power Mode or Safari's autoplay rules. Use custom code to force muted playback, but always provide fallback content on mobile devices where autoplay may fail.