Website Building » Squarespace » How Do You Add a Background Video on Squarespace?

How Do You Add a Background Video on Squarespace?

Last updated on December 23, 2022 @ 7:25 am

There are two ways to add a background video on Squarespace. The first way is to use the built-in video background feature. To do this, go to Design > Custom CSS and add the following code:

#collection-5d95d8e8e4b0d37a917e7414 .sqs-bg-video-wrapper {
  padding-top: 56.25% !important;
  height: 0;
  overflow: hidden;
}
#collection-5d95d8e8e4b0d37a917e7414 .sqs-bg-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

PRO TIP: Adding a background video on Squarespace can result in decreased page loading times and decreased overall site performance. Additionally, background videos may not be compatible with all browsers and devices.

Replace 5d95d8e8e4b0d37a917e7414 with your collection ID. This code will make sure that your video background maintains the correct aspect ratio.

The second way to add a background video on Squarespace is to use an external video hosting service like YouTube or Vimeo. To do this, go to the page or post where you want to add the background video and click on the '+' sign.

Then, click on the 'Video' button and paste in the URL of your video. Click on the 'Save' button and you're done!

Drew Clemente

Drew Clemente

Devops & Sysadmin engineer. I basically build infrastructure online.