#1. First, you need to find the Portfolio item URL.
In my example, we will have:
- /portfolio01/project-one-ephnc-ra6kt
- /portfolio01/project-two-llrgk-y6r72
- /portfolio01/project-three-8zgh7-cw24f
- /portfolio01/project-four-yjynj-3ft5b
- /portfolio01/project-five-jkmzy-8756a
#2. Install Lightbox Plugin, plugin will give you some code to add to Code Injection Header/Footer, like this.
#3. Create a Page in Not Linked with Name/URL:
- Lightbox Video – /lightbox-video
#4. Add some Video Blocks to this Lightbox Video Page
#5. Install Squarespace ID Finder and find the ID of these Video Blocks. In my example, we will have:
- Video 01: #block-yui_3_17_2_1_1717469864332_4134
- Video 02: #block-yui_3_17_2_1_1717469864332_3425
- Video 03: #block-yui_3_17_2_1_1717469864332_2864
#6. Use this code to Code Injection – Footer, above Plugin code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$('.grid-item[href="/portfolio01/project-one-ephnc-ra6kt"]').attr('href','#wm-popup=/lightbox-video#block-yui_3_17_2_1_1717469864332_4134');
$('.grid-item[href="/portfolio01/project-two-llrgk-y6r72"]').attr('href','#wm-popup=/lightbox-video#block-yui_3_17_2_1_1717469864332_3425');
$('.grid-item[href="/portfolio01/project-three-8zgh7-cw24f"]').attr('href','#wm-popup=/lightbox-video#block-yui_3_17_2_1_1717469864332_2864');
</script>
#7. Result.
When clicking an item on the Portfolio Page, a Video Lightbox will appear.
