Video's Play button to trigger action

Ask the community
,
1

Hi, I would like to rebuild this action in Editor X:

Press “Play” button —> The overlay elements above the video will disappear for the video to play —> Reappear when we hit “Pause”.

I wonder if this is possible in Editor X. If not, what’s the best alternative?

Thanks!!

2

You can do this with the help of Velo

3

Hey @phanhlosophy-design !

@aakashsharma is right, a little bit of Velo would solve this.

Here’s a quick example I built to show it in action

And here’s the code I used:


$w.onReady(function () {

    let fadeOptions = {
        "duration": 250,
    };

    $w("#videoBox1").onPlay(() => {
        $w("#text3").hide("fade", fadeOptions)
    })

    $w("#videoBox1").onPause(() => {
        $w("#text3").show("fade", fadeOptions)
    })

});

Swap out text3 fo the ID of your text element, and videoBox1 for the id of your video element.

Hope it helps :slight_smile:

4

I think we should use collapse and expand instead of hide and show because it does not take up the space

5

Either method should work, but I think it might depend on the measurement settings. If the elements are layered over the video element, you’d want them to continue taking the same space to ensure the video element didn’t resize between playing and pausing, no?

But I don’t see a problem with using either. Velo is really cool for adding fun interactions like this :slightly_smiling_face:

6

Yes, You are correct

7

Hey @noahlovell , I want to make the megamenu similar to Nike.com same design and smoothness behaviour. Please help me

8

Start a new post and I’ll point you in the right direction :slight_smile:

9

ok

10

I have posted but it is not showing now

11

Thanks so much @noahlovell ! It works like a charm!! :slight_smile:
One more question: If I want to make multiple elements disappear, how can I add their IDs in this code?

12

You can multi select element ID’s like this:

$w("#element1, #element2, #element3").hide("fade", fadeOptions)

Just add all the elements you want to show and hide into the selector