Light house effect

How to achieve a lighthouse effect using Overlay, where clicks on a button ‘How it works’ on the website and it opens a window in which Youtube video plays. So the user does not exit the website and still on the website but they can exit the Youtube video by clicking on the X/exit button on the form.

I tried using the Overlay function but the video plays in both Preview and Non-preview mode so I am not confident if it will function correctly/properly when the website will be Live.

Any tips on it pls. If you tried in the past, please share a link.

2 Likes

We’ve got ya!

(Watch on 1.5x speed)

3 Likes

Thank you very much. It did help me to solve the problem, however, the unintended behaviour of the sitejet continues to intrigue me. When I click on the x mark to close the YT video, the video still plays. This is where I am not confident that if it will work properly.

Thank you.

2 Likes

Most definitely - it might be worth submitting a help ticket to help@sitejet.io

2 Likes

Hey @Suman_S - yes, @zachary is right. Send us a ticket with the following information:

  • Website ID
  • Screencast
  • location of the video
  • include a link to this thread please.

Will have a look at this for you :innocent:

2 Likes

Hi Andre:

Pls find below my answers:

Suman

2 Likes

It is better to use the Overlay Preset and use the YouTube Video as background. The Preset also provides the JS you need to close the video. The animation will just hide the video when you click the ‘X’.

Here is the result:
https://www.awesomescreenshot.com/video/4137808?key=3314cf23b1c723a216c39543894166b8

How to:
https://www.awesomescreenshot.com/video/4137816?key=9fb8d4c314cd51779ceced0fc91da7c6

2 Likes

Thank you. This did help in solving the problem. :smiley:

1 Like

What he said :slight_smile:

1 Like

I learned something! Thanks @Martin !

3 Likes

Hi Martin,

Need your help!

Now I am facing another issue. Check out my website https://www.ideadeployer.com/
There is white space on my home page after the Header section where this Overlay is hiding. But this should NOT create any white space. Ideally, it should show overlay when clicked on the ‘How it works’ button.

What is happening:
When you click on the trigger button, the overlay is visible and white space is gone. So now I can find that home page looking OK. But when you refresh the page, the problem is back.

What am I missing here?

1 Like

@Suman_S can you show us what you mean?

I just checked and it seemed the overlay was indeed functioning properly (Chrome)

2 Likes

It is working now. I simply deleted the existing pre-set and followed your steps. It worked.

2 Likes

:innocent:
image