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 and some devices in Low Power Mode often block background video autoplay, replacing it with a play button. This behavior is intentional due to battery-saving policies and cannot be fully overridden using standard Webflow settings. However, there are a few workarounds you can try using custom code.

​

1. Understand Safari and Low Power Mode Limitations

​

• Autoplay is restricted for videos with audio, or if the browser/device is in Low Power Mode, and Apple does not allow autoplay in those conditions.
• Safari requires the video to be muted for autoplay to work. Even muted videos may be paused in Low Power Mode.

​

2. Use Webflow’s Background Video Element Correctly

​

• Place your video using the native Background Video element.
• Ensure your video is muted, looping, and optimized in both size (under 30MB) and format (ideally .mp4).
• Webflow automatically sets the video to muted, loop, and autoplay — but autoplay cannot be forced in all environments.

​

3. Use Custom Code to Enhance Behavior

​

You can attempt to simulate autoplay behavior using JavaScript, though this won't override power-saving policies:

​

• Add this in the Page Settings > Footer Section:

​

<script>
  document.addEventListener("DOMContentLoaded", function () {
    var videos = document.querySelectorAll("video");
    videos.forEach(function (video) {
      video.muted = true;
      video.playsInline = true;
      var playPromise = video.play();
      if (playPromise !== undefined) {
        playPromise.catch(function () {
          // Fallback: user interaction may be required to play
        });
      }
    });
  });
</script>

​

• This code attempts to programmatically trigger video playback when the page loads.
• Note: This won’t work if the browser actively blocks autoplay (e.g., Low Power Mode or Data Saver mode). It handles only edge cases like videos marked incorrectly.

​

4. Provide a Fallback for Unsupported Scenarios

​

• If autoplay fails, consider adding a still image with a background gradient or animation behind the video that matches its look.
• You can visually layer a background image and the video so it degrades gracefully.
• Alternatively, add a custom play button with styling to match your site design if autoplay doesn’t work.

​

Summary

​

You can’t force autoplay in Safari or Low Power Mode due to system-enforced restrictions. However, you can use muted video, custom JavaScript fallback code, and graceful degradation (like still image background) to handle these edge cases effectively.