Can I make a video play when it comes into view without code on Wix Studio?

Ask the community
, , , ,
1

Question:
How can I make a video automatically play when it comes into view while scrolling, without using any custom code?

Product:
Wix Studio Editor

What are you trying to achieve:
I want to create a section on my Wix Studio site where a video (either background or embedded) starts playing when the user scrolls down and it enters the viewport — like a scroll-triggered autoplay effect. I don’t want it to play on page load, only when it becomes visible. And I’m specifically trying to do this without any custom code or Velo scripting.

What have you already tried:
I’ve explored the native scroll effects, interaction triggers, and experimented with video settings like autoplay and play on hover. I also checked Wix documentation and community posts, but couldn’t find any no-code option to do this. I know it’s possible with custom code, but I’m looking for a native no-code solution.

Additional information:
I’m using the latest Wix Editor available at editor.wix.com. Just wondering if there’s any native or no-code workaround that lets a video play on scroll, maybe using scroll effects, triggers, or animations already available in the editor.

2

Hi, @Amey_Kurade !!

Hello. Regarding the desire to trigger video autoplay when the element appears on screen, based on my own testing, I believe this may actually happen automatically in Wix Studio. I’ve suspected for a while that websites built with Wix Studio are designed to reduce load by automatically pausing video playback when the video element goes out of view. :thinking:

Therefore, all you need to do is turn on the “Autoplay” toggle in the video element’s settings. Even if you enable autoplay, the video won’t actually start playing until it enters the viewport. So, in effect, this achieves the behavior you’re aiming for, without needing to write any code. :innocent:

You can verify this with a simple test using code like the example below. Feel free to try it out yourself if you’re curious. :wink:

$w.onReady(function () {

    setInterval(()=>{
        console.log($w("#videoPlayer1").isPlaying);
        console.log($w("#videoBox1").isPlaying);
    },100);

});

You can see that the value changes to “true” when the video comes into view, and goes back to “false” when it leaves the screen. :melting_face:

1 Like
3

Hey there,

I was checking this out as well and created a blank site on the Wix Editor but videos don’t play immediately on the site load but rather once they enter the viewport which you can see the video below;

However, it does start playing once any portion of the video enters the viewport so if you do want to delay the autoplay once the video is on the screen (maybe if you believe users will scroll a bit slower, you can try the code @onemoretime shared).