LightPress Posted November 27, 2019 Share Posted November 27, 2019 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
iknowbryan Posted December 3, 2019 Share Posted December 3, 2019 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=- Link to comment
codeandtonic Posted April 18, 2021 Share Posted April 18, 2021 (edited) 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 Edited April 18, 2021 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment