By default, Squarespace crops background videos to fill the screen, which might not be ideal if you want the full video to be visible. Ensuring background videos maintain their original aspect ratio—especially on mobile devices—can be a challenge.

Here’s how you can tweak your site’s design to maintain the original aspect ratio of your background videos without compromising the user experience.

Why videos get cropped

Background videos are typically set to "cover" their containers, meaning they resize to fill the screen entirely. While this works well for creating a seamless visual experience, it can crop the sides of your video, especially on mobile devices where screen dimensions vary widely.

The solution: Preserve the aspect ratio with custom CSS

By customising your site’s CSS, you can ensure your videos maintain their original aspect ratio. The CSS should be pasted into the Custom CSS panel. It should take effect when you save your changes and refresh the page.

The CSS provided below is for 16:9 videos that have been uploaded directly to Squarespace (known as “native” videos), not those embedded from Vimeo or YouTube.

By using this method, your Squarespace background videos will look exactly how you envisioned them, on all devices.

/************************************** 
Maintain Native Video 16:9 Aspect Ratio 
Copyright SF.DIGITAL https://sf.digital
Use freely in your Custom CSS but
do NOT re-publish.
**************************************/
.section-background .sqs-video-background-native {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
  background: #000;
}

.section-background .sqs-video-background-native__video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.section-background .sqs-video-background-native__video-player video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

How this works

The CSS above uses padding-top to set the aspect ratio padding of the section background to 56.25%, maintaining the 16:9 aspect ratio. If your video has a different aspect ratio, I have provided padding values for popular aspect ratios at the end of this post. It sets object-fit to contain, making sure the video scales to fit within the container without cropping, showing the entire frame.

Padding-top values for popular aspect ratios

16:9 (Widescreen)

56.25% - formula: (9 ÷ 16) × 100

4:3 (Standard)

75% - formula: (3 ÷ 4) × 100

3:2 (Photography)

66.67% - formula: (2 ÷ 3) × 100

1:1 (Square)

100% - formula: (1 ÷ 1) × 100

21:9 (Ultra-Widescreen)

42.86% - formula: (9 ÷ 21) × 100

9:16 (Vertical/Portrait)

177.78% - formula: (16 ÷ 9) × 100

Did this help?

If you’d like to say thanks for this guide, a coffee is always appreciated, but not expected.

10% off Squarespace

If you haven’t signed up for Squarespace yet, you can get 10% off your first subscription of a Squarespace website or domain by using the code SFD10 at checkout. This link is an affiliate link which means, that when you receive your discount, I may earn a commission. This comes at no additional cost to you and helps support the Squarespace guidance that I provide for free.