Adding a pop out video on icon click

Site URL: https://www.subjectresources.com

Hello!

I have a one minute video I would like to play when a user clicks on the 'play button icon' on my homepage.

Can someone please walk me through how I can add this to my squarespace site? 

Many thanks!

Hi,

The easiest way is use Video Lightbox Plugin to achieve this. 

If you need a free solution, you can use this code from Codepen: https://codepen.io/webrav/pen/ZrBNQR

>> Add a Code Block with this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" />
<script>
$(function() {
    $('.popup-youtube, .popup-vimeo').magnificPopup({
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,
        fixedContentPos: false
    });
});
</script>
<style>
  a.popup-youtube {
  	font-size: 0px;
  }
  a.popup-youtube:before {
  	content: "\e01f";
    font-family: "squarespace-ui-font";
    font-size: 30px !important;
  }
</style>
<a class="popup-youtube" href="https://www.youtube.com/watch?v=pBFQdxA-apI">Open YouTube video</a><br>

Replace youtube with new video url

Quote

(The answer contains an affiliate link, which means I will receive a small commission if you click and buy the plugin according to the link above.)

Hi 

Thank you! How can I use this purple play icon as the code block icon rather than the CC? 

On 7/31/2022 at 3:58 PM, Stevey1919 said:

Hi 

Thank you! How can I use this purple play icon as the code block icon rather than the CC? 

Can you share link to page where you added the code? We can check CC icon easier