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 especially in low power mode) restricts autoplay for background videos, particularly when they have sound or are not muted. This is a known browser-level limitation and not just a Webflow issue.

Here’s how to handle it using Webflow’s tools and some custom code.

1. Ensure Correct Video Settings in Webflow

• Use the native Webflow background video component for background videos.
• Make sure the video is muted and looping, as these settings enable autoplay on most browsers.
• Safari only autoplay videos that are muted, inline, and don’t trigger sound.

2. Add Custom Code to Force Inline Behavior

• Add this custom JavaScript to your site using an Embed element or in the Before section of the Project Settings custom code:

• This helps ensure autoplay and inline rendering:

  Code snippet (placed between <script> tags):

  `document.addEventListener('DOMContentLoaded', function() {
  var videos = document.querySelectorAll('video');
  videos.forEach(function(video) {
  video.setAttribute('playsinline', '');
  video.setAttribute('muted', '');
  video.setAttribute('autoplay', '');
  });
  });`

• This code augments Webflow’s native settings to reinforce playsinline, autoplay, and muted attributes—Safari requires them explicitly.

3. Understand That Autoplay May Still Fail in Specific Cases

• Even with this setup, Safari on iOS in Low Power Mode will prevent autoplay completely, and there’s no way around it via code.
• When this happens, Safari shows a play button overlay by design, which cannot be removed or bypassed with custom code.

4. Provide a Static Fallback for Better UX

• Add an image as a background fallback behind the video using Webflow’s background settings.
• This ensures your layout doesn’t appear broken if the video can't autoplay.

Summary

You can enhance autoplay compatibility in Safari with muted, playsinline, and autoplay attributes via custom JavaScript. However, autoplay will still not work in Low Power Mode on Safari, and the play button is unavoidable. Use a fallback image to maintain a consistent user experience.