Squarespace New Features Spotlight: Hosted Background Videos + Video Pages
Squarespace New Features Spotlight: Hosted Background Videos + Video Pages
Squarespace continues to roll out new features. Today I wanted to focus on those related to video. Specifically, we’ll be diving into Hosted Background Videos and the new Video Pages.
If you’re interested in my roundup of all of the updates from last fall and winter with examples of how I’ve implemented several of them on our Sisu Site Shop website check out this post: Squarespace New Features Roundup: Fall & Winter 2021-22.
1 | Hosted Video Backgrounds
Hosted Video Background was released in mid-August, 2021. This new feature now allows embedding videos directly into your section backgrounds in Squarespace. This update is only available on 7.1.
Currently, each website has the option for uploading 30 1-minute hosted background videos directly in Squarespace no YouTube or Vimeo required!
In order to access the new feature head to your Squarespace Account Dashboard and click on the thumbnail (the small picture) of your website.
At the top left of your screen, you’ll want to click on the Edit button to enter the backend of your website.
Click “Edit”
On any page hover your mouse between sections until you see the blue line and the add section button. Click “add section.”
Click “Add Section”
In the Add Section Pop Up scroll down the left hand menu. I chose to add a blank section.
Add a New Section - add a blank section
To find the Hosted Background Video feature navigate to the section editor on the upper right side of the section.
Edit Section
Next, select the background tab and then select the Video tab. To add your video click + or drag & drop a video. At this time videos can be up to 60 seconds long and up to 500 MB. Videos can be MP4, M4V, or MOV.
Edit Section-Background Tab, Video Tab
Styling options for the videos include Background Width: Full Bleed or Inset, Filter: None, Blur, Brightness, Contrast, Invert, Opacity, Saturate, and Sepia, Playback Speed: .5x, 1x, 1.5x, or 2x, and a Mobile Fallback Image.
Section Editor-Background Video Options
Section Editor-Background Video Options Cont.
Section Editor-Background Video Filter Options
On the Sisu Site Shop website, we added a background video image to the second section of our VIP Days Page. To see it in action click here.
For even more details see the Squarespace Adding Videos Guide.
2 | Lock Screen Background Video
Another video option is to add a background video to your lock screen. This feature is not new, but I didn’t know about it prior to researching my updates roundup post. This does require you to have an externally hosted video with a URL.
To find this feature go to Home > Design > Lock Screen > Media > Video
From the Design Menu click Lock Screen
Once in the Lock Screen menu select the Media tab.
From the Lock Screen menu click Media
First, you’ll need to paste the URL for your video. Squarespace supports both Youtube and Vimeo URLs. The rest of Media-Video options are very similar to the Video Content options for the Hosted Background Video discussed above. Filter: None, Blur, Brightness, Contrast, Invert, Opacity, Saturate, and Sepia, Playback Speed: .5x, 1x, 1.5x, or 2x.
Lock Screen: Media Tab Menu
And scroll down to find the last option, a Mobile Fallback Image.
Lock Screen: Media Tab Menu Cont.
For a full run-through of all the options when designing a Lock Screen read this Squarespace Guide: Additional details Designing A Lock Screen
3 | Video Section
Video Section is another option for including videos on your website.
After clicking on the add section blue button, click video from the left menu
There are five layout options for Video Sections.
Add Section Menu: Video Layout options
Scroll down using the scroll bar on the right to see the fifth layout option.
Add Section Menu: Video Layout options cont.
Once you’ve selected your layout option you can edit the video by clicking on the video block and clicking the pencil edit option. A pop-up Content Menu appears. In the Content Menu, you can add the video URL, create a custom thumbnail, and toggle on or off a caption.
Edit Video Menu: Content options
Edit Video Menu: Content options-Caption off
Edit Video Menu: Content options-Caption on
There is also a video block option that you can add to any section. You’ll find this option any time you click an add block insert point. It is the third option on the left column of the Add Block Menu.
Add Block Menu: Video option
The edit menu for the Video Block is the same for the Video Section.
4 | Video Pages
Video pages are here! As the first update of 2022, Squarespace chose a good one! Video pages are collection pages, think—blogs, events, and portfolios. This update is also only available on 7.1. Everyone has the option of up to 30 minutes of total video storage included with your Squarespace plan. If you’d like or need additional time you can add on a Members Area Plan.
With the Members Area Starter plan you receive 5 additional hours of video playtime. So you have the original 30 minutes plus the additional 5 hours for a total of 5.5 hours. Currently, the starter plan runs $9/mo. The Members Area Core plan offers 20 hours of additional video storage (20.5 hours total) and runs $18/mo. Finally, the Members Area Pro plan offers 50 hours of additional video (50.5 hours total) and costs $35/mo.
An additional consideration when selecting a Members Area Plan for those selling memberships is the transaction fee rate for each plan tier, Starter-7%, Core-4%, and Pro-%1.
If you are hosting videos on YouTube or Vimeo there is no limit, these videos are unlimited. At this time, there is no option to customize the thumbnail for these externally hosted videos. Fingers crossed this option will be added soon.
So let’s get into how to find this new feature. You’ll be able to add new video pages from the Pages panel.
Click Pages from the Home menu
Once you’re in the Pages Menu, click the + for either the Main Navigation or Not Linked Navigation depending on if you’d like it to show in your main navigation links or not.
Click the +
Next, in the + Pages Menu, click on Videos, near the bottom of the list. You may need to scroll down to find it.
From the + Pages Menu, select Videos
In the Add Videos Menu, you’ll have the option to select from two-page layouts: Video 1 or Video 2. Video 1 has a top banner area with the video category navigation horizontally and directly beneath the banner with the video thumbnails beneath the navigation. Video 2 does not have a banner and has a vertical video category navigation to the left of the video thumbnails. As with other pages, you’ll have the ability to add sections above or below the banner section or the videos section. Just keep in mind all the videos are housed in one section.
Add Video: Choose Video 1 or Video 2 depending on your layout preferences
Again, the Video 1 option has a top banner with a headline and call to action button. The video category navigation is laid out horizontally beneath the banner section. Video thumbnails are beneath the navigation.
Video 1 Layout
Next, we’ll take a closer look at the main Videos settings menu.
To access the main Video settings click the gear icon at the top of the menu
Under the video settings General tab you can edit the Page’s Title, Navigation Title, Custom URL, Enable Page: toggle on or off, and set a Password. Under the Categories you’ll be setting the categories for this Video Collection Page.
Video Pages: Video settings-General tab
Video Pages: Video settings-Categories tab
In the SEO tab you can upload a SEO optimized title and description. Finally, in the Advanced tab you will have access to add Page Header Code injection.
Video Pages: Video settings-SEO tab
Video Pages: Video settings-Advanced tab
To access the individual videos, first click on the category. The number here specifies the number of videos in this category.
Click each category to see the specific videos in each category
You can also access the Videos settings by clicking the gear icon at the top of each video category list.
Click the gear icon to access Video settings menu
This Video settings menu is the same as the one discussed above.
Video settings menu can be accessed from both the Main Videos menu and the Video Categories Menu
To acces the individual videos editing menu click on the three-dot icon to the right of the video.
Click the three-dot icon to open the individual video edit menu
The Edit video menu houses a menu with elements similar to the video pages settings menu as well as blog pages. In the Content tab you can edit the Video Title, see the total Video Storage, toggle on and off a Customize featured image for Squarespace hosted videos, add an expert, description, customize the URL, toggle on or off a Featured Video option and Duplicate the page. On the Categories tab you can add or search for a category and see a list of your current categories. Simple check the box for the category for this particular video.
Individual Video: Edit video menu-Content tab
Individual Video: Edit video menu-Categories tab
In the Status tab you’ll have options of Draft, Published, and Scheduled followed by the published date and time which you can edit after publishing by selecting a new date and time. In the SEO tab you have the options to add an SEO Title and or SEO Description
Individual Video: Edit video menu-Status tab
Individual Video: Edit video menu-Status tab cont.
Individual Video: Edit video menu-SEO tab
The remaining Individual Video menu options include sending a video to the top or bottom of the list, moving it to a new collection page and deleting. You can also rearrange the videos in the list by clicking the six-dot icon on the left of the checkbox and dragging it into your desired position.
Individual Video: Move video pop-up
Here’s a closer look at the Videos 2 layout option. If you need any addition info check out Squarespace’s Video Pages Guide.
Video Pages: Video 2 Layout option
I can really see how this update will be quite useful for a number of people. I am excited to see examples in use and to see if additional styling options become available in the near future! This update will be very useful for our own website as well as many of my clients. If you’d like to learn more about the other new features and updates Squarespace has rolled out you can read my post: Squarespace New Features Roundup: Fall & Winter 2021-22
Building a new website?
5 things to do before you start
Need help getting organized and inspired to build a new website?
This quick guide will get you started!
Website Photos & Graphics Guide
Need a little help getting your photos ready for your new site?
Grab our freebie now!
Know someone who could benefit from this article? Please share it with them:
Hej! Thanks for stopping in! Sisu Site Shop is an online business strategy + custom brand and web design studio. We sell Squarespace 7.1 templates, offer VIP Days for brand + web design + Dubsado setups for small businesses including Artists, Educators, and Hospitality Professionals. We serve clients worldwide from our current home base in Montana. We help you start, organize, and modernize your business, brand, and website so that you can sell, serve, and stand out online. If you have a project in mind we’d love to learn more about it!
When you’re ready here are three ways we can help you:
Template Shop & Semi-Custom Website Design: Our custom Squarespace 7.1 templates provide a professionally designed foundation for you to build upon and customize! You can even upgrade to a semi-custom service and we’ll customize the template with your brand and photos.
Online Business VIP Day: Our Online Business Intensive can help you create a strategy, build a simple website, or knock out admin to-dos!
Custom Brand Identity, Website, & Automation Design: Truly elevate your online presence & processes
for Squarespace 7.1 & Dubsado. We will partner with you to craft a brand & website you can’t wait to share!
We also have many tips and resources about strategy, design, and starting an online business. If we were chatting face to face, we’d offer you some tea and invite you to hang out for a while. Please consider this invitation to explore our site and learn more about our journey with the same intention!
When you’re ready to start your journey, build your business, and find your freedom, fill out our application to get started!
