For the examples below, I am going to be using a different lightbox method than the ones in my other tutorials. Reason is this lightbox works best for videos.
Credit: https://sorgalla.com/lity/
Step 1
1) Put the below code into the Header of your Squarespace page
<link href="https://sorgalla.com/lity/dist/lity.css" rel="stylesheet"/>Step 2
1) Put the below code into the Page area of your Squarespace page. I recommend putting it near the bottom of the page.
<script src="https://sorgalla.com/lity/vendor/jquery.js"></script>
<script src="https://sorgalla.com/lity/dist/lity.js"></script>Option 1 – Custom Button
In this example, we will display a button on the page to launch the Video lightbox. The button is a custom button, so feel free to change colors and other parts.
Here is the code I am using for my custom button with the code to launch the video lightbox:
<center>
<a href="//www.youtube.com/watch?v=FLBd218SDaA" data-lity>
<div style="background-color:#000; width:350px; border-radius:50px; color:#ffffff;text-transform: uppercase; letter-spacing: 2px; height:60px;">
<p style="padding-top:10px;">
Watch Video <i class="fa fa-play-circle" aria-hidden="true"></i>
</p>
</div>
</a>
</center>Option 2 – Squarespace Button
In this example, we will display a Squarespace button on the page to launch the Video lightbox. The button is a custom button, so feel free to change colors and other parts.
Here is the code I am using for my custom button with the code to launch the video lightbox:
<div class="sqs-block button-block sqs-block-button" style="text-align:center;">
<a href="//www.youtube.com/watch?v=FLBd218SDaA" data-lity class="sqs-block-button-element--medium sqs-block-button-element">Watch Video</a>
</div>Option 3 – Text
In this example, we will display Text on the page to launch the Video lightbox.
Here is the code I am using for the text / link to launch the video lightbox:
<a href="//www.youtube.com/watch?v=FLBd218SDaA" data-lity>Watch Video</a>