To add Video Lightbox to Video Page in Squarespace, you can do these.
#1. Find Video Item URL.
In my example, we will have:
Item 1. /videos-2-2/v/hosted-with-custom-z9ehj-dk54m-kn9sj-5bl29
Item 2. /videos-2-2/v/planet-earth-mejnx-gxhec-h2w7n-cft36
Item 3. /videos-2-2/v/everything-to-sell-anything-427ge-t8t94-ys9pb-dexmy
#2. Use this code to Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// item 1
$('li.grid-item .lessons-image[href="/videos-2-2/v/hosted-with-custom-z9ehj-dk54m-kn9sj-5bl29"]').attr('href','#wm-popup=/videos-2-2/v/hosted-with-custom-z9ehj-dk54m-kn9sj-5bl29');
// item 2
$('li.grid-item .lessons-image[href="/videos-2-2/v/planet-earth-mejnx-gxhec-h2w7n-cft36"]').attr('href','#wm-popup=/videos-2-2/v/planet-earth-mejnx-gxhec-h2w7n-cft36');
// item 3
$('li.grid-item .lessons-image[href="/videos-2-2/v/everything-to-sell-anything-427ge-t8t94-ys9pb-dexmy"]').attr('href','#wm-popup=/videos-2-2/v/everything-to-sell-anything-427ge-t8t94-ys9pb-dexmy');
});
</script>
Remember to change Video Item URL in the code.
#3. Install this Popup plugin.
Plugin will give you some code to add to Code Injection > Header.
and Footer.
#4. Result
When users click an item, a lightbox will appear.
