How to create video Lightbox gallery on Squarespace 7.1 Sections
We are excited to announce the latest feature of Lightbox Studio: enabling Squarespace video lightbox with Squarespace 7.1 Gallery sections! In case you are interested on the inception of this, check out this post Proposal: creating a Video gallery with Squarespace Gallery Sections
Supported Gallery sections include
Grid: Simple Gallery section
Grid: Strips Gallery section
Grid: Masonry Gallery section
Slideshow: Simple Gallery section
Slideshow: Full Gallery section
Slideshow: Reel Gallery section
Auto layouts sections
Video Support for 7.1 Gallery Sections
Squarespace 7.1 gallery sections traditionally only support image slides. With our latest updates from Lightbox Studio, you can now integrate videos into your gallery sections seamlessly.
Supported Video Types
Check out this post for the step-by-step tutorials to upload videos to Squarespace grab the links
YouTube
Vimeo
Videos uploaded to Custom CSS Panel (Custom files)
Videos uploaded to Link Editor Panel
Video uploaded to Video block, Section background and Assets Library
Note to readers: If you want to use Squarespace hosted video in lightbox, make sure they are embed somewhere on your page to make it an active assets, or else the playlist URL will be returning 401 error and prevent the video lightbox to be played.
Supported Gallery Types
Grid, Strips and Masonry layout support lightboxify URLs by default
Slideshow: Simple - Slideshow: Fullscreen - Slideshow: Reel can support video lightbox gallery by follow this tutorial to enable lightbox for slideshow
Video upload on Custom css panel
Enhancing Video Playback
When integrating videos into your Squarespace gallery sections, you can enhance playback by using URL parameters. These parameters allow you to control various aspects of the video player behavior.
Supported URL Parameters for Video
| Parameter | Description | Values |
|---|---|---|
autoplay |
Automatically start playing video | 1 (enabled), 0 (disabled) |
loop |
Loop the video continuously | 1 (enabled), 0 (disabled) |
playsinline |
Play video inline on mobile devices | 1 (enabled), 0 (disabled) |
controls |
Show video player controls | 1 (enabled), 0 (disabled) |
muted |
Mute the video by default | 1 (enabled), 0 (disabled) |
portrait |
Change default video aspect ratio to 9:16 | 1 (true), 0 (false) |
ratio |
Explicit set the video aspect ratio, instead of follow thumbnail ratio | eg: 4:3 |
How to use URL Parameters
URL parameters begin with a question mark (?), followed by the parameter and its value. For example:
https://file.mp4?autoplay=1
If you are adding multiple parameters to the same embed code, separate them with ampersands (&). For example:
https://file.mp4?autoplay=1&loop=1&muted=1&ratio=9:16
In this configuration:
autoplay=1enables autoplay.loop=1enables looping.muted=1mutes the video by default.ratio=9:16set video aspect ratio to 9:16.
Example URL Configuration
https://static1.squarespace.com/static/603e3b9f038b852d44eabf1a/t/65e0731cb8de77489df5de7e/1709208358581/btnanimminentend2.mp4?autoplay=1&controls=0&loop=1&muted=1&playsinline=1&ratio=4:3
This URL configures the video with the following settings:
autoplay=1: The video will start playing automatically when loaded.controls=0: The video player controls will be hidden.loop=1: The video will loop continuously.muted=1: The video will be muted by default.playsinline=1: The video will play inline on mobile devices rather than fullscreen.ratio=4:3set video aspect ratio to 4:3.
Using these parameters, you can customize how your videos behave within the gallery lightbox, providing a more tailored and engaging user experience.
Supported URL Parameters for other providers
Vimeo URL: See Vimeo embed options.
YouTube URL: See YouTube embed options
How to turn an image slide into a video slide
To turn an image slide into a video slide:
Leverage Lightboxify URLs: Once you have the video URL with appropriate playback URL configuration, head to the slide's clickthrough URL.
Insert the Video URL: Add the video URL in the clickthrough URL section.
Automatic Conversion: Once the video URL is detected, it will be seamlessly converted into a video slide.
Insert video URL into image clickthrough
How to Redirect Clickthrough URL Instead of Opening Video Lightbox
If you want the clickthrough URL to redirect instead of opening the video lightbox, simply append the URL parameter lightboxify=false to neutralize the Lightboxify URL's effect.
https://file.mp4?lightboxify=false
Example
The below video demostrated how videos is displayed on Lightbox gallery with Gallery section on 7.1 template. The videos are uploaded to Custom css panel and is set to hide controls, loop and autoplay
Here is another example of leveraging Video URLs on Gallery sections to create a video portoflio with captions hover effect: Implement Video Portfolio Concept with Lightbox Studio
Conclusion
With this new feature, Lightbox Studio brings a powerful enhancement to your Squarespace 7.1 gallery sections, allowing you to create rich, engaging video lightboxes. Stay tuned for more updates, and feel free to leave comments or suggestions. If you have any specific needs or questions about integrating videos into your Squarespace site, don't hesitate to reach out!
Frequently Asked Questions
Question: Squarespace hosted videos playlist (m3u8) won’t play?
If you want to use Squarespace hosted video in lightbox, make sure they are embed somewhere on your page to make it an active assets, or else the playlist URL will be returning 401 error and prevent the video lightbox to be played.
Question: How do I make a video autoplay in a gallery lightbox?
To make a video autoplay in a gallery lightbox, you need to add the autoplay and muted parameters to the video URL. The muted parameter is necessary because most browsers do not allow autoplaying videos with sound.
For example, if you're using an MP4 file, you would structure the URL like this:
https://file.mp4?autoplay=1&muted=1
Question: How to change aspect ratio of the videos?
By default, Lightbox Studio will try to parse the ratio directly from thumbnails, if it not available, default aspect ratio will be applied (16:9) or based on the portrait param (9:16)
In case you need to explicit assign aspect ratio of video, using ratio parameter. Eg: ratio=4:3
https://file.mp4?autoplay=1&muted=1&ratio=4:3
Question: What is the playsinline parameter?
The playsinline parameter allows videos to play inline within the webpage on mobile devices, rather than in full-screen mode. This provides a smoother and less disruptive user experience, especially for gallery lightboxes where you want to keep users engaged with your content without taking them away from the page.
Question: Example of Vimeo video URL with parameters?
To embed a Vimeo video with specific parameters, you can append the parameters to the Vimeo video URL. Here is an example of a Vimeo video URL with parameters for autoplay, loop, and muted:
https://vimeo.com/123456789?autoplay=1&loop=1&muted=1
Question: Example of YouTube video URL with parameters
To embed a YouTube video with specific parameters, you can append the parameters to the YouTube video URL. Here is an example of a YouTube video URL with parameters for no controls and muted (notice the parameter is mute):
https://www.youtube.com/embed/nxWNyTiE7J0?mute=1&controls=0
Question: How can I upload a video to the Link Editor panel in Squarespace?
After adding a gallery section, you can add images to it:
Hover over the gallery, click the image icon, then click +.
To add new images from your device, click Upload Images.
You can also reuse your old images or use stock images
After uploading an image, you can:
Add a clickthrough URL in the Link field.
Click the Gear icon on Link field to access Link Editor panel
When Link Editor opens:
Click to File
Click Upload File button and start upload your videos
Ensure the uploaded file checkbox is checked
Press Save
Adding playback URL params:
When Link Editor close you can view your video link has been inserted, append the playback url parameters as you like and save the gallery
Link Editor file upload with playback param
