Squarespace — Background Video Section with 16:9 (or any) Aspect Ratio

[Edit 16 Dec 2021]

We can now use the new CSS aspect-ratio property instead of the old padding percentage hack. I’ll have a new better code soon. If you’re implementing fixed aspect ratio background images in Squarespace you can get in touch at @hire to get the latest, best, easy-to-use version of this code. It’ll be a lot simpler.

Code example:

.container {
  width: 100%;  
  /*padding-top: 56.25%; */
  aspect-ratio: 16 / 9;
}

[Edit 11 Aug 2021]

Code edited to enable any aspect ratios

How to avoid cropping Squarespace background video sections?

Normally you’d have some content in front of the video so the spacing and sizing is determined by that. If you write a long wall of text, the video background resizes accordingly.

(However I think that’s not a good way to use this element. )

How to get it 16:9 (or any fixed) aspect ratio?

Normally it gets cropped in weird ways even if it’s blank without any content. There’s no setting to display the full video without cropping. But lucky for you – there’s Code + Tonic.

Video

Here’s the Custom CSS code :

/*
┌─────────────────────────────┐
│background video aspect ratio│
└─────────────────────────────┘
*/

//SETTINGS
// Aspect ratio callculator: https://ontopmarketing.agency/css-aspect-ratio-calculator/

@bg-video-aspect-ratio-padding: 56.25%;

section.page-section[data-section-id="607c60c3d86f341f00d785a9"] {
  
  //MOBILE & DESKOP (add display: none to hide, then add display:block to desktop to show there only )
  
  //display: none; 

  //DESKTOP ONLY
  html.no-touch & {
    display:block !important;
  }

    //aspect ratio spacer as bottom padding
    padding-bottom: @bg-video-aspect-ratio-padding;
    min-height: 0 !important;

    .section-background  .sqs-video-background iframe {
      //make it the size of parent, no matter what automatic JS it would like to do
      border-width: 0;
      position: absolute !important;
      top: 0 !important;
      left: 0!important;
      bottom: 0 !important;
      right: 0 !important;
      height: 0;
      width: 100% !important;
      height: 100% !important;
    }

    // Hide content blocks. This is just a background. If you don't use this there are black bars :/
    .content-wrapper{
      display:none !important;
    }
}

Hire a pro Squarespace developer

Anything you’d like to change or improve in your Squarespace site, I’m able to do it. Don’t hesitate to get in touch ☺️@hire