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

Extend support for Auto layouts sections will be ready soon!

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

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 is not supported (yet)

Check out this post for the step-by-step tutorials to upload videos to Squarespace grab the links

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 Files (mp4, ogg)

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)

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

In this configuration:

autoplay=1 enables autoplay.
loop=1 enables looping.
muted=1 mutes the video by default.

Example URL Configuration

https://static1.squarespace.com/static/603e3b9f038b852d44eabf1a/t/65e0731cb8de77489df5de7e/1709208358581/btnanimminentend2.mp4?autoplay=1&controls=0&loop=1&muted=1&playsinline=1

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.

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

Squarespace video lightbox example

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: 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: 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