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.

We’ve got ya!

(Watch on 1.5x speed)

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.

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

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:

Hi Andre:

Pls find below my answers:

Suman

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

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

What he said :slight_smile:

I learned something! Thanks @Martin.Sitejet.Team !

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?

@Suman_S can you show us what you mean?

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

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

:innocent:
image

1 Like