Autoplay Safari not working

Design help Custom code
1

Hi all,

I’m working on a project for a client who is a video editor. I’ve used some custom code from Timothy Ricks, which allows vimeo videos to autoplay. This works completely fine on browsers like Chrome and Firefox, but it doesn’t autoplay on Safari (only on my MacBook, as it is working perfectly on my iPhone).

This code already includes ‘muted’ autoplay. I’ve seen other websites with the same ‘problem’, where videos are automatically paused on Safari. However, I’ve also seen some websites where videos actually do autoplay on Safari, which tells me there is a solution. But since I’m not a code wizard, I’m not sure how to fix this.

I’ve seen some comments about low energy mode, but that is not the case I’m guessing.

This is the code I’m using to autoplay vimeo videos:

Scherm­afbeelding 2023-10-25 om 08.55.47
Scherm­afbeelding 2023-10-25 om 08.55.471742×272 48.9 KB

A website where autoplay works on Safari: https://www.unrealistic-ideas.com

If any one has a solution, I’d be happy to hear :wink:

2

It actually has something to do with lower enegry mode :zipper_mouth_face:

3

Indeed, a solution that works even in low power mode can be found here: https://lesniakrafal.com/enabling-autoplay-in-safaris-low/

4

I could not get my videos to autoplay on safari.

My temporary work around was to hide the videos on safari and display and image instead. The video and image are inside the same div.

Im not a dev but used ChatGTP to write this for me after many failed attempts at trying to autoplay in safari.

<script>
document.addEventListener('DOMContentLoaded', function() {
  var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

  if (isSafari) {
    // Select all elements with the class 'w-background-video'
    var videoContainers = document.querySelectorAll('.w-background-video');

    // Loop through the NodeList object and set display to 'none' for each
    videoContainers.forEach(function(container) {
      container.style.display = 'none';
    });
    
    // Optionally, insert alternative content here if needed
  }
});
</script>