Possible Fix for Maintaining Background Image/Video Aspect Ratio

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 */ }

Nice.

To do other aspect ratios, just divide the second number by the first then multiply by 100

E.g.

16:9 — 9/16 = .5625 * 100 = 56.25

3:4 — 4/3 = 1.333 * 100 = 133

Hope this helps!

-=b=-

Hi

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