Jump to content

Possible Fix for Maintaining Background Image/Video Aspect Ratio

Recommended Posts

Had a hard time finding any answers on how to maintain a specific, responsive aspect ratio for Brine Family index sections with background videos. My client has a full width background video that needs to avoid cropping, and this was the best solution I could figure out.

Does anyone know how to calculate the padding for other aspect ratios, like 3:4? 

I will post a link to the site when it is live.

section#your-section-url { 
position: relative; 
width: 100%; 
padding-top: 56.25%; /* 16:9 Aspect Ratio */ }
Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 year later...


Brine is a 7.0 template but if you'll upgrade (or others have 7.1) I made a tutorial for that.

Just wrote a CSS snippet to create uncropped 16:9 aspect ratio youtube background video sections in Squarespace 7.1 

Check out the Squarespace — Background Video Section with 16:9 Aspect Ratio -blog post. 

Need help?
hire { at } codeandtonic.com

Edited by codeandtonic

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.