How to get a full-screen video header in Squarespace
yoohoo!
This post contains info for both Squarespace 7.0 and 7.1.
Skip ahead to see your relevant instructions!
Don’t know which version you have? Here’s a quick cheat to find out:
When you log into your website on Squarespace, there will be an arrow at the top of the page that you can click for a full-screen view.
If the arrow is in the top-left corner, you have Squarespace 7.0.
If the arrow is in the top-right corner, you’re using version 7.1!
Oh, and if you haven’t purchased your Squarespace subscription yet, feel free to use my code BEJ10 for 10% off.
Now on to the tutorial 🙂
If you’re looking for a way to use a video as the background of a section in Squarespace (even your header), you’re in the right place.
And if you want your navigation menu and logo to lay nicely on top of that header, this blog post will show you how to make your navigation bar transparent!
how to create a video banner in squarespace 7.0
Note: This is only an option for templates in the Brine family and the Bedford family. Those are two of the most flexible templates in terms of design capabilities, so they’re what I typically recommend.
If you have a different template from version 7.0 and wanna change to a Brine or Bedford template, here’s how you can switch over!
Instructions for the Brine family of templates, including the following:
Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Custom Template (discontinued), Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln (discontinued), Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
(This only works for pages inside of an index!)
One: Make sure the video you want to use is uploaded to YouTube or Vimeo, and is set to either Public or Unlisted.
Two: In the pages panel, click the gear icon next to the page you want to affect.
Thre: In the pop-up, go to the Media tab.
Four: Select Video, and paste the URL of your YouTube or Vimeo video.
Four: Scroll down for more customization options, and SAVE.
Instructions for the Bedford family of templates, including the following:
Anya, Bedford, Bryant, Hayden
One: Make sure the video you want to use is uploaded to YouTube or Vimeo, and is set to either Public or Unlisted.
Two: Click Edit over the page you want to affect (or the top page in an index).
Three: In the pop-up, go to the Media tab.
Four: Select Video, and paste the URL of your YouTube or Vimeo video.
Five: Scroll down for more customization options, SAVE, and refresh the site.
how to create a video banner in squarespace 7.1
Instructions for ALL the templates in the most recent version of SQSP:
One: Make sure the video you want to use is uploaded to YouTube or Vimeo, and is set to either Public or Unlisted.
Two: Go to the page you want to edit, then click EDIT in the top left corner.
Three: Go to the top content section of the page (that’s not the navigation bar), and click the pencil icon in the top right to edit that section.
Four: In the pop-up, go to the Background tab.
Five: Select Video, and paste the URL of your YouTube or Vimeo video.
Six: Scroll down for more customization options, then hit DONE and SAVE in the top left corner of the page.
