How to add a simple, lightboxed video (interactive popup)
Table of Contents Show
Pin it! 📌
I had a client that was interested in adding a popup video to her home page, as a kind of initial greeting. I thought that was a great idea, but it wasn’t something I’d ever even considered before as most people embed their videos directly on the page.
Increasingly over the years, I’ve found the need to have a way to popup this or that thing and it’s not always a video; sometimes it’s a size chart or an article link that’s being referenced, etc.
I checked into it & it seemed like something most people don’t know you can do (or how) which makes this a great topic to cover & share with you!
Thankfully, there are TWO methods to do this easily: one is free & the other uses a paid plugin (an affordable one-time payment).
How to add a friendly + interactive video popup
Method ❶ – Gallery Block Lightbox
free option -no code necessary
Disclaimer!
Gallery blocks aren’t available to ALL users of v7.1 of Squarespace.
Gallery Blocks are only available to Squarespace Circle Members these days (in favor of every-day-customers using the Auto List Gallery sections instead), so if you can’t find it in the block options menu, that’s why! Just skip to Method #2.
Step ❶
Record your video & upload it to either YouTube (free) or Vimeo (paid) and grab its share link.
YouTube will allow you to add videos that are “Unlisted” which basically means its not searchable/findable unless the viewer has the EXACT URL for it. (YouTube videos set to “Private” don’t work with Squarespace’s video embedding system.)
Step ❷
Add a gallery grid block to the page where you want the video to go and adjust the settings to show only 1 item per row, so the item inside will be the full width of the Gallery block on that page.
Don’t add any content to the block quite yet, that process is a little different than you’re used to!
Step ❸
Design your thumbnail image. You can use any design software, whether that’s Canva for non-designers, or Adobe Illustrator, –whatever you like as long as it exports to either a jpg or png file.
Don’t add the actual play button quite yet. Why? Because it’ll be linked to a video URL, Squarespace will apply the play button automatically, so if you add one too you’ll have duplicate play buttons in the same image!
You can, however, add a custom background color/shape that will go behind the play button to draw attention to it, but be prepared to adjust/play with the placement of it. It may require several deletions of the thumbnail image, edits, exports & uploads to get it right –it’s not an exact science, as you’ll see in my example below (because it’s slightly off-center.)
Step ❹
Now that you have your thumbnail image design ready to go, go back to your Squarespace editor & click on the Gallery block to get that settings dialog box.
INSTEAD of uploading the image as usual, make sure you click the ➕ in the bottom right corner of the dialog box. Select the video option, then paste in your video’s share URL and use the thumbnail area to upload your custom image for the video.
Before you Apply those changes, make sure you check the box beneath the image thumbnail that says to Use Thumbnail, otherwise it’ll ignore your design!
Now Apply the change to the Gallery block and save the changes to your page.
You might have to refresh the page, but otherwise, your newly designed image is now ready!
When you click anywhere on that image, a video popup will display (looks like a lightboxed image) with an overlay color on the background and an ✖️ button in the upper right-hand corner to close/exit the lightbox.
Voilá!
Method ❷ – Lightbox Anything
paid code plugin ~$60
Squarespace somewhat recently removed the Gallery block from general users & only Circle Members have access to it on 7.1 websites, which means the first method I mentioned above won’t work because you don’t have an available Gallery block to use IF you’re not a Circle Member.
So, the workaround is to use the Lightbox Anything plugin from Omari, over at SQSP Themes –and no, I’m not an affiliate, just a really happy customer because that shit works SO well because with it…
…You literally can lightbox anything that can be linked.
Step ❶
Buy the plugin and install the code using the instructions HTML document you’ll get in your downloadable .zip file.
Set up your plugin in the settings with that HTML window, which will generate the last part of the code you’ll need to install.
In the “Base” settings tab, check the box labeled “Omit Prefix for Video Links” if you want videos to open in a lightbox without needing the #lightbox prefix in the link. (I’ll show you what I mean in the accompanying video.)
Step ❷
Now that the code is installed, you can go Lightbox Anything! All you need is something that can have a custom link assigned to it, from Gallery section images, to image blocks, buttons, hyperlinks –you name it, you can link & lightbox it!
External URLs are easy! The syntax for that link will be: #lightbox_paste-url-here
The “#lightbox_” prefix triggers the custom plugin code, and the link following the prefix is what it loads in the lightbox popup. That link can be a video (YouTube, Loom, Vimeo, Wistia, etc), a document link (Dropbox/Drive file, Google Doc/Form/Sheet, ClickUp Doc/List/Task/Dashboard, Notion page, another website or resource, –the list is nearly limitless!)
Have fun!
