Autoplay Background Video Only in The Middle of The Screen


Is there a way to only let the video nearest to the center of the screen autoplay on mobile devices?

There will be 3-4 background videos (100% width) on the mobile screen at the same time when scrolling down (total of 20 videos). I don’t want all of them to autoplay at the same time, just the one closest to the center of the screen. Is that possible?

1 Like

You can achieve this with GSAP + ScrollTrigger

I’m not sure how familiar you are with JS and GSAP but you just have to write a function to play the video when in view and another function to pause the video when out view.

And use those functions on ScrollTrigger, I had done something similar in the past and ScrollTrigger code should be something like this below:

allVideos.forEach(video => {
        trigger: video,
        start: "center bottom",
        end: "center top",
        onEnter: self => startVideo(self.trigger),
        onLeave: self => endVideo(self.trigger)