Background Video Play and Pause on Hover Conflicts with Safari

Design help Custom code
1

Hi Webflow Team and the Community,

I was trying to achieve background video play and pause on hover effect. It works fine on Chrome, but is not quite compatible with Safari.

Does anyone figure out any solutions?

Screenshot 2024-07-26 at 10.15.06 AM
Screenshot 2024-07-26 at 10.15.06 AM1404×1146 79.7 KB

Screenshot 2024-07-26 at 10.02.24 AM
Screenshot 2024-07-26 at 10.02.24 AM1186×166 19.2 KB

Thank you all.

Here is my site Read-Only: LINK

2

The issue seems to be with how Safari handles the pause method on videos. To address this, I added a check to ensure the video element is fully loaded before applying the play and pause functionality.

Here’s the updated code:

document.querySelectorAll(‘.image-stack-video-elem video’).forEach(video => {
// Ensure the video is fully loaded before attaching event listeners
video.addEventListener(‘loadeddata’, () => {
// Play video on hover
video.parentElement.addEventListener(‘mouseenter’, () => {
video.play();
});

// Pause video on mouse leave
video.parentElement.addEventListener('mouseleave', () => {
  video.pause();
});

});
});