Return to cover image on video box when not hovering

Discussion Ask a question
1

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.

2

Hey @gswood92 ,
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.

3

There’s a way to fake it.
Here is an example:

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});
    });
 
});