How to make a video disappear?

For question 3 and 4: im sooo sorry, but i really don’t understand this language… can you write the coding sentences for me and I add them to my existing coding? :wink: I would be super grateful!

Try this Franziska :

import { local } from 'wix-storage';

$w.onReady(function () {

 let videoopen = local.getItem('videoopen'); // We get the cookie

 if (videoopen) { // Does the "videoopen" cookie exist? If yes, hide video player
        $w("#videoPlayer1").hide();
    } else { // if no, show videoplayer
        setTimeout(() => { $w("#videoPlayer1").hide().mute(); }, 37000);

        local.setItem('videoopen'); // send the cookie to the client's browser
    }
});

export function videoPlayer1_mouseIn(event) { // If the mouse passes over the video, the sound is activated
    $w("#videoPlayer1").hide().unmute();
}
export function videoPlayer1_mouseOut(event) { // If the mouse passes over the video, the sound is disable
    $w("#videoPlayer1").hide().mute();
}

export function button1_click(event) { // If I press the button to exit the video
    $w("#videoPlayer1").hide();
    local.setItem('videoopen');
    console.log("cliqué");
}

Consider adding a button with the id “#button1:wink:

Hey Lukas,

yes, the first point of hiding the video after having seen it, works! I chose for the “session” option. Thanks for that.

The sound and the button doesnt seem to work though… i created a button named “button2”, but its not functionning. I will post the coding here again for you to have a look.

And then another thing i come across: the video frame (and also in general the website) doesnt seem to be responsive, meaning that its not centric and with every other laptop size, the video format changes. So i guess i need a % instead of a resolution. Or how can i solve this?

import { session } from ‘wix-storage’ ;

$w.onReady( function () {

let videoopen = session.getItem( ‘videoopen’ ); // We get the cookie

if (videoopen) { // Does the “videoopen” cookie exist? If yes, hide video player
$w( “#videoPlayer1” ).hide();
} else { // if no, show videoplayer
setTimeout(() => { $w( “#videoPlayer1” ).hide().mute(); }, 37000 );

session.setItem( ‘videoopen’ ); // send the cookie to the client’s browser
}
});

export function videoPlayer1_mouseIn(event) { // If the mouse passes over the video, the sound is activated
$w( “#videoPlayer1” ).hide().unmute();
}
export function videoPlayer1_mouseOut(event) { // If the mouse passes over the video, the sound is disable
$w( “#videoPlayer1” ).hide().mute();
}

export function button1_click(event) { // If I press the button to exit the video
$w( “#videoPlayer1” ).hide();
session.setItem( ‘videoopen’ );
console.log( “cliqué” );
}

Thanks for your help again

Hello,

Regarding the .mute (), I have no idea why it doesn’t work. I have also tried this on my website and it does not work either. I think the bug comes from wix …

Regarding the button, you must define the “onclick” field. Here’s how to do it:

For the width and height of the video, unfortunately, I don’t know how to do it on the classic wix editor (especially since we can’t change the css on wix).
I know this is possible on the new wix editor ( Editor X ) with its grid system.

If someone has an idea for this

Hello Lukas again,

i defined the onclick field for the button as you show, but still its not working. Nothing happens when i click on the button in the video.

Hello Lukas,

did you see my previous message regarding the button? What shall i do now in order to make this work? Many thanks

Hello,

You named the onclick event of your button “button2_click_1”, so you need to replace your code below :

export function button1_click(event) { // If I press the button to exit the video
$w( " #videoPlayer1 " ).hide();
session.setItem( ‘videoopen’ );
console.log( “cliqué” );
}

by this :

export function button2_click_1(event) { 
// If I press the button to exit the video 
$w("#videoPlayer1").hide(); 
session.setItem('videoopen');
}

Good luck :wink:

ok, great, that works (i didnt name the button like this, but it came automatically i think). Thanks

For the automatic sound, any idea? can you ask someone in your community maybe or investigate further how to solve this bug?

Hello Lukas,

For the automatic sound on the video, any idea how to fix the bug? can you ask someone in your community maybe or investigate further how to solve this bug? Whom can i ask?

Many thanks for your help

Hello Lukas,

no answer on the above?
Another question that you might know: the “skip the video” button in the desktop version is not taken into the mobile version… why is that and how can i change that?
Thanks a ton

Hello Lukas,

i just googled a bit on the sound issue of my video, and i found the following:

“Due to changes in policies of web browsers, many of them no longer support autoplay of music and videos. This means that automatic background music on sites is no longer possible.”

Is that the reason?

Hi, I’m interested in potentially applying this code to my site. I am curious though, whereabouts would I paste the code? Do I open an html box and add the code to a youtube widget, or do I upload the video to my site and find a place to add the code in (I’m assuming) Velo? Thank you.

@myprofaddress Is the video you’re wanting to play on youtube? If so you can add a Video Player, and then link the youtube video.

That being said, the code above will not work in a lot of browsers, as chrome and some others don’t allow auto-play. but there is a different way to do it now (though it does require the user to start the video. But on the other hand, it’s better code.

$w.onReady(function () {  

$w('#videoPlayer1').onEnded(()=>{
    $w('#videoPlayer1').hide()
})

})

Turn on dev mode, then add a video player. Make sure it’s named #videoPlayer1. Then paste that code into the code editor. This should make the videoplayer hide when the video is over.

If you want it to collapse, exchange .hide() with .collapse()

Hope this helps!

Hi @franziskajosteit ,
How did you get the video to go over the header (main menu) instead of playing under the header?

There are a few different ways you could approach this. One option might be to use video editing software like Movavi (movavi.com) to create your video and add some special effects to make it disappear at the end. This might require a bit of experimentation and testing to get right.Another option might be to use some HTML and CSS coding to control the display of your video.

To have a short video playing at the beginning of your website and disappear after it’s finished, you can use a video player with autoplay functionality and set the video to only play once. To ensure that the video doesn’t slow down your website’s loading time, you can compress the video using an online video compressor such as Video Compressor Online . Even if you don’t know how to do it right, then you can always watch tutorials on YouTube. I hope this will help you.