Video Block Aspect Ratio Fix

Code Toolkit
Written By Squarestylist Support

What You'll Create

Custom aspect ratios for your Squarespace Video Blocks by overriding the default padding values. Includes a smooth 0.5-second fade-in animation when videos load, plus mobile-specific adjustments.

The Problem It Solves

Squarespace applies automatic padding-top percentages to maintain video aspect ratios, but this can conflict with custom layouts or specific video dimensions. This technique gives you precise control.

Perfect For

Vertical phone videos, cinematic widescreen trailers, square social media videos, custom video frames, full-bleed video sections.

What Makes This Different

Removes default spacing to let you set custom aspect ratios. Includes smooth 0.5-second fade-in animation for professional appearance. Mobile breakpoint adjustments included at 767px screen width.

Details

  • Section Type: Fluid & Classic

  • Code Type: CSS

  • Prerequisites: Video Block with native player

  • Toolkit Title: Video Block Aspect Ratio Fix

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

  • The complete, copy-paste code

  • Video walkthrough explaining how it works

  • The principles behind the technique so you can customize it

  • Access to our private community for support

Get Access to Standout Squarespace →
Squarestylist Support
Previous

Control Summary Block Items on Mobile
Next

Phone Mockup Video Frame