Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Jan 10

Return to cover image on video box when not hovering

I'm wondering if it is possible to have it so that when a user is not hovering over a video (and therefore playing the video, in my case) the coveer image is restored rather than just pausing the video, how do you get cover images to come back once you've uncovered them?

Sorry if this has been asked before.

1
7d agoEdited: 7d ago

There's a way to fake it.

Here is an example:


Kapture 2021-01-13 at 00.40.21 (1)
.mp4
Download MP4 • 14.61MB

You can use this code example:


$w.onReady(function () {
 
     const image = $w('#your_image_id');
     const video = $w('#your_video_id');

    image.onClick(() => {  
        video.play();
        image.hide('fade', {duration: 500});
    });

    video.onEnded(() => {
        image.show('fade', {duration: 500});
    });

    video.onPause(() => {
        image.show('fade', {duration: 500});
    });

});

If you want it on hover you can use this one:


$w.onReady(function () {
 
 const image = $w('#your_image_id');
 const video = $w('#your_video_id');
 
    image.onMouseIn(() => {
        video.play();
        image.hide('fade', {duration: 500});
    });

    video.onMouseOut(() => {
        video.pause();
    });

    video.onEnded(() => {
        image.show('fade', {duration: 500});
    });

    video.onPause(() => {
        image.show('fade', {duration: 500});
    });
 
});

1

Hey @Gareth Wood,

I'm Shiri from the Editor X team.

Thank you for raising this question. At the moment this option is not available. Nevertheless, this is a great idea. We made a note of your requirement, and will consider it for our plans.

Editor X

Design your boldest creations.