How to make a video disappear?

Ask the community
,
1

I would like to have a short video playing at the beginning when entering my website. Once it’s finished, I would like it to disappear. How can I do that?
Many thanks for your

2

Hello,

You can try this:

First we automatically start the video, secondly we add a countdown to hide the video once it is finished

$w.onReady(function () {  
// Start the video
if( $w("#videoPlayer1").isPlaying ) {
 $w("#videoPlayer1").pause();
}else {
$w("#videoPlayer1").play();
}
setTimeout(() => { $w("#videoPlayer1").hide(); }, 10000);        // 10000 is the time of your video in milliseconds
});

Good day to you,
Lukas

3

Hello Lukas,

i’ve tried your advise, added my 37000 milliseconds (37 seconds), but there are red icons popping up, plus the video doesn’t hide after its finished on the site…

See my print screen.

What can i improve?

701×256 7.86 KB

4

Hello @franziskajosteit ,

The error in red tells you that the id “videoPlayer1” does not exist.

To do this, you must right click on your element (your video) and click on “View property”. A small window opens at the top right, you can then click on “id” and modify the name of the element as you wish. For the example above, the id is named “videoPlayer1” but you are free to name it whatever you like.

To be clearer, here is a gif showing you the procedure:

Remember to register your site then tell me it’s good, good luck! :wink:

Lukas.

5

Hello Lukas,

thanks for your help!
I did what you said, but i dont know how to confirm this. So far the video doesnt listen yet to my change, and the red icons are still showing…

here a print screen again

1598×256 16.3 KB

6

Hey Franciska,

It’s strange, can you tell me what is indicated when you hover the mouse over the red balls? What does it indicate as a message?

7

it says indeed ‘#videoPlayer1’ is not a valid selector

8

Did you put a “#” in front of " videoPlayer1 " ?
If so, you need to remove it ^^

9

Hi Lukas, i didnt put any #. See my new print screens.

10

11

12

thanks a lot for letting me know

13

@ Tonystark: ???

At Lucas: any other suggestion on how to solve this issue?

14

Hey Franziska !

I just noticed a syntax error, in the code that I gave you above, I had forgotten a parenthesis. :sweat_smile:

Instead, try this, it should be good for you:

$w.onReady(function () {  
    setTimeout(() => { $w("#videoPlayer1").hide(); }, 37000);     
});
15

Yes, great Lukas, this formula is much shorter, but it works!
Next question haha: so i would like to have this video appear once you enter my website, and then it’s disappearing and you get to the normal menu. For now i added a video box into my first page. However, this means that i only see this video below my main menu (instead of full screen). Shall i insert a total new page or how can i make this happen? have a look at my website if you need to get a better understanding: www.luisajo.com
Many thanks for your support again

16

Yes, great Lukas, this formula is much shorter, plus it works! Many thanks!
Next question haha: so i would like to have this video appear once you enter my website, and then it’s disappearing and you get to the normal menu. For now i added a video box into my first page. However, this means that i only see this video below my main menu (instead of full screen). Shall i insert a total new page or how can i make this happen? have a look at my website if you need to get a better understanding: www.luisajo.com
Many thanks for your support again

17

Hello franziska,

Glad the code works!

I do not understand your next request. Want your video to take the full height and width of your site? However, when I go to your site, your video already takes up the full width of your site. Can you be clearer please?

1919×1004 325 KB

18

You are right, i could fix it. But here some more questions :wink:

  1. Every time you click on “Home” in the website it replays the video from the start. I think the video should play when you first enter the website, but when you click “home” again from under another tab then it should go back to the static home (not the video replayed). How can i implement that?
  2. Can i somehow crop the black balk on top of the video?
  3. How to add “skip the intro video” in order to get directly to the Home view (in case you have seen the video already etc)?
  4. When viewing the video, the music is automatically turned off, and the viewer only has the chance to enable it when hovering over the video. I would like to have it standard on, and then you can turn it actively off. Is that possible?

Many thanks for your great help!

19

1- You can use the " wix-storage " API. If the user arrives on the home page, a cookie is saved. If the user returns to the home page and the cookie is already saved locally on their browser, then the video is automatically hide .

2- To remove the black bands on your video, it’s up to you to manage it on your video editing software. Wix does not allow cropping the video.

3- You can create a button which allows you to hide the video when clicking, using the onclick and " hide " function.

4- You can perform this action using the " onMouseIn " function and add the sound of the video using the " unmute " function. :wink:

20

Thanks Lukas for your answer.
For question 1): so in need to add the following code to my already existing code, right?
import { local , session , memory } from ‘wix-storage’ ;
Which one of the three should i take? and where exactly in the existing coding should i put the new sentence (beginning or end)?