Add a background video to your sections on Squarespace 7.1

Want to add a video to the background of your sections on Squarespace? Well good news, this is now even easier than it was before. 

Let’s dive straight into the tutorial. 

How to add a background video to your sections on Squarespace 7.1

Head to the page that you want to add your video to and within the edit dashboard add your section and then click Edit Section. 

In the edit panel that appears, head to the Background tab and select the Video option. 

Here you can add your video. You can choose to upload your video file from your own desktop, select a video that you’ve already uploaded to Squarespace or add a link from YouTube or Vimeo.

head to the Background tab and select the Video option.

Watch the video

Check out the YouTube video below 👇

Once you’ve uploaded your video you can scroll down the panel to customise your background video. 

Here you can add a filter to your video such as a blur or brightness altering option. The brightness filter is a popular choice as it alters the opacity of the video which is useful for background videos that will have text or other elements on top of them.

Here you can add a filter to your video

You can also change the playback speed, Squarespace will set your video to half speed as default so you can use the + and - buttons to change the speed of your background video.

Here you can also add a mobile fallback image. This is a great feature that Squarespace offers. If a user accesses your website and their internet connection isn’t great, they will struggle to load your background video. Instead they’ll be presented with the mobile fallback image which their connection will find easier to load.


📩 Join the inner circle to get exclusive code updates


Hit save and your background video has been added. 

Don’t forget to edit the background video for the mobile version of your site. Within your edit section panel you can toggle the fill screen option off, allowing you to move and resize the video to be just right for mobile screens. 

Like I said at the start, adding a background video to a section is now so much easier than it once was, back in the day reformatting the video was almost impossible causing many people to avoid video backgrounds altogether. 

If you found this article useful, make sure you check out the rest of my Squarespace tutorials for more expert tips and tricks.


Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.


Want more?

Sam Crawford

This article was written by Sam Crawford, one of the world’s leading Squarespace website designers.

Sam is an official Squarespace Expert, official Squarespace Partner, official Squarespace Community Leader, official Squarespace blog contributor, official Squarespace panelist, Squarespace educator and multi-award winning Squarespace designer.

https://bycrawford.com
Previous
Previous

How to change the speed of your background video on Squarespace 7.1

Next
Next

Disable scripts in edit mode on Squarespace [How to activate safe mode]