How to add a video popup window when an image/text is clicked on – SqueezeMobi Support

First step is to make sure the lightbox is enabled. Go to Appearance > Customize > Content > Lightbox then enable it. Don't forget to hit Save & Publish to save your update.

Next go to squeezefunnels builder, click the Add Content button and expand Basic Modules. Drag and drop the HTML module to your page.

Copy and paste the code below to your HTML module replacing the video and image urls.

<!DOCTYPE html>
<a id="fl-homepage-video" href="https://www.youtube.com/watch?v=2fYYnnxFxRo"><img src="http://onetest.squeezefunnels.com/wp-content/uploads/sites/1050/2016/07/popup-demo-e1467855834646.png"/></a>

<script type="text/javascript">

jQuery( function(){
    jQuery( '#fl-homepage-video' ).magnificPopup({
        type: 'iframe',
        mainClass: 'mfp-fade',
        fixedContentPos: false
    });
});

</script>

Here's how the sample code looks in a page.

You also have a choice to use a text instead of an image. Below is an example of the code. (just replace the video URL and Text with your own)

<!DOCTYPE html>
<a id="fl-homepage-video" href="https://youtu.be/2fYYnnxFxRo"><font color="red"><font size="6">Watch the Demo</font></font></a>

<script type="text/javascript">

jQuery( function(){
    jQuery( '#fl-homepage-video' ).magnificPopup({
        type: 'iframe',
        mainClass: 'mfp-fade',
        fixedContentPos: false
    });
});

</script>

Here's how it looks in the page once it's published. (1st image used image url, 2nd image used text)

Once the image/text is clicked on the pop-up window opens instead of leaving your page/site.

Note: If you add multiple images/text with pop-up videos in a page make sure they have different ID.

Example: fl-homepage-video

fl-homepage-video-1

fl-homepage-video-2