You can embed background videos on Cover Pages and some templates' page banners. Background videos play on loop without sound and add a dynamic visual effect to your site.
Background videos pull from Vimeo or YouTube video share URLs. For a custom look and feel, you can apply stylized filters and overlay colors.
Before you begin
- The page or banner background color will display while the video buffers. If the video takes a few seconds to load, the fallback image may display. Load time depends on your internet connection.
- Mobile browsers don't support background videos. You can display a mobile fallback image in place of the background video on mobile devices.
- There's no time limit for videos, although shorter videos may display the background color more frequently when looping.
- Set the video to Public/Unlisted and allow embedding. Private YouTube videos don’t display as background videos.
- Disable Overlay ads. If your video has Overlay ads enabled, the ads will display over the background video.
- Depending on the layout you choose and the device your visitors use, they may briefly see a YouTube logo in the bottom right corner of the video. You can make this more subtle by applying the Blur filter to your video.
- Video ads that play before the video, also known as pre-roll ads, won't play on background videos.
- Set the video to Anyone and allow embedding Anywhere. Private Vimeo videos don’t display as background videos.
- If you have a Vimeo Plus, PRO, or Business account, you can set the video to Hide this video from Vimeo.com and allow embedding Only on sites I choose.
- We recommend uploading videos to a Vimeo Plus or PRO account. Vimeo Basic accounts display the Vimeo player bar for the first few seconds of playback in the background.
Step 1 - Find your video URL
To add a background video, upload it to Youtube or Vimeo and find its share URL. It isn't possible to upload a video directly to Squarespace or embed videos hosted by a different service.
- Create or log into a YouTube account.
- Upload a video or find one you've already uploaded.
- Ensure the video is set to Unlisted/Public and allows embedding.
- Copy the video's share URL.
- Create or log into a Vimeo account.
- Upload a video or find one you've already uploaded.
- Ensure the video is set to Anyone and allows embedding.
- Copy the video's share URL.
Step 2 - Add the video
The steps to add the video are different for Cover Pages and website page banners. Follow the steps below depending on where you're adding the video.
Note: Until you add your URL, you'll see a short video of the ocean as a demo placeholder.
Cover Page background
To add the video to a Cover Page:
- Open an existing Cover Page, or add a new one:
- For one-page Cover Page sites: In the Home Menu, click Media.
- For Cover Pages added to websites or stores: In the Home Menu, click Pages.
In most Cover Page layouts, videos play in a full-bleed background behind the Cover Page's content, extending to the edges of the browser.
There are a few exceptions. These layouts display videos differently:
- Flash - Displays in side panel
- Spotlight - Displays in side panel
- Vignette - Displays in side panel
- Backstory - Displays in side panel
- Session - Displays in side panel
- Focus - Displays in the circular portrait area
- Monocle - Displays in the circular portrait area
- Flagship - Doesn't support video
- Harbor - Doesn't support video
In some templates, you can add a video background to a website page banner in place of a static banner image. This creates a great visual effect when you combine it with text overlays.
To add the video to a page banner:
- In the Home Menu, click Pages.
- Hover over the page title in the left panel and then click the .
- Click the Media tab.
- In the Media tab, click the Video tab.
- Paste your video's URL into the Video URL field.
The following templates support banner videos on the listed page types. This table groups templates by family.
|Adirondack||Page, Product, Album, Events, Blog|
|Bedford, Anya, Bryant, Hayden||Page, Product, Album, Events, Blog|
|Brine, Clay, Feed, Foster, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, Thorne||Page, Album, Events, Blog|
|Five||Page, Album, Events, Blog|
|Marquee, Adversary, Alex, Eamon, Shift||Page, Product, Events, Blog|
|Montauk, Julia, Kent, Om||Page, Events, Blog, Index (creates a banner on the Index Page itself; Index grid thumbnails don't display videos)|
|Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi||Page, Product, Album, Events, Blog|
|Tremont, Carson, Henson||Page, Product, Album, Events, Blog|
|York, Artesia, Harris, Lange, Jasper, Shibori||Page, Product, Album, Events, Blog, Project|
Step 3 - Add a filter
Filters alter the video's appearance and give it a stylized look. A filter's effect depends on the color and imagery of the video, so we recommend experimenting to find the right effect.
To add a filter:
Click the Filter drop-down menu in the Video tab and choose from:
For all filters except Invert, you can adjust the strength using the slider.
Note: Filter effects may render differently across browsers.
Step 4 - Change the playback speed (YouTube only)
If you’re using a YouTube video URL, you can select a Playback Speed to change your video's speed. The default speed is 1x, meaning the video will play at its normal pace. Choose from four different speeds:
- 0.5x (slow)
- 1x (normal)
- 1.5x (faster)
- 2x (fastest)
Step 5 - Add a mobile fallback image
Mobile browsers don't support background videos. You can set a mobile fallback image to replace the background video on mobile devices. For the best results, format your image for web display before uploading it.
To set a mobile fallback image, drag your image into the image uploader or use a licensed Getty Image, then click Save.
If you don't add a mobile fallback image, a background color will display on mobile instead. You can set this color with the following Style Editor tweaks:
|Cover Pages||Background: Color|
|Adirondack||Content Background Color|
|Bedford, Anya, Bryant, Hayden||Banner Overlay Color|
|Brine, Clay, Feed, Foster, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, Thorne||Overlay Color|
|Five||Banner Overlay Color / Header Background|
|Marquee, Adversary, Alex, Eamon, Shift||Image Overlay Color / Content Background Color|
|Montauk, Julia, Kent, Om||Canvas Background|
|Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi||Overlay Color|
|Tremont, Carson, Henson||Site Background Color|
|York, Artesia, Harris, Lange, Jasper, Shibori||Background Color|
Step 6 - Add an overlay color (Cover Pages only)
Overlays add a tint to background videos in Cover Pages. By default, the color is a shade of gray complementing your video. Since the visual effect of these settings depends on your video and whether you've set a filter, we recommend exploring different colors and blend modes to find a combination that best suits your video.
To change the overlay color:
- In the Cover Page panel or Home Menu, click Style.
- Scroll down to Video Background.
- Click Custom Overlay Color.
- Choose a new color from the wheel.
- You can also select an Overlay Color Blend Mode from the drop-down menu to change how the color appears.
For website page banners: If your template supports banner text overlays or a banner overlay color, this will appear over the banner video. Website banner overlays don't offer an Overlay Color Blend Mode.
Disable the background video
To disable the background video, switch to a background image.
In the Media tab or panel, click Image, then click Save. The set image will replace the background video.
If you're using a Cover Page, you can also choose None to replace the video with a background color.
Video banners in an Index
You can add video banners to the Index in certain templates. This list groups templates by family.
- Bedford, Anya, Bryant, Hayden
- Brine, Clay, Feed, Foster, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, Thorne
- Marquee, Adversary, Alex, Eamon, Shift
- Montauk, Julia, Kent, Om
- Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi
- York, Artesia, Harris, Lange, Jasper, Shibori