How to remove Padding Around Video Blocks in Squarespace 7.1
Videos are an incredible tool for engaging your audience—whether you’re telling a personal story or showing off a cool new product on the homepage. But when you insert a video block in Squarespace 7.1 and you might see padding or spacing (white space) around the video, thus the video is misaligned from another nearby block.
In this post, we’ll guide you through an easy and elegant method of removing padding from video blocks through the use of custom CSS to let your video content fit smoothly and neatly into your layout.
The Problem: Unwanted Padding Around Video Blocks
Padding and spacing are automatically added to your Squarespace video blocks, resulting in a nicely balanced look. This works fine in terms of most layouts, but can be limiting if you’re trying to achieve:
A full-width video experience
A cleaner, edge-to-edge layout
Its behavior aligns with images or text
The Solution: Custom CSS to Remove Padding
You can easily override Squarespace’s default padding rules by targeting video blocks with custom CSS.
Step-by-Step Instructions
1. Navigate to:
Pages → Custom code → Custom CSS
2. Paste the following code:
/* Remove padding and margin from all video blocks */
.sqs-block-video {
padding: 0 !important;
margin: 0 !important;
}
/* Remove inner container spacing */
.sqs-block-video .intrinsic {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
This will:
Strip away all padding and margin from Squarespace’s native video block
Ensure the video spans the full width of its container
Target a Specific Video Block Only
If you want to apply this styling to a single video block, do the following:
Right-click on the video → Inspect
Locate its block ID (e.g. #block-yui_3_17_2_1_1682345678901_12345)
Use this CSS:
/* Remove spacing from a specific video block */
#block-yui_3_17_2_1_1682345678901_12345 {
padding: 0 !important;
margin: 0 !important;
}
#block-yui_3_17_2_1_1682345678901_12345 .intrinsic {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
Mobile Optimization (Optional)
Ensure consistent spacing on smaller screens by adding:
@media screen and (max-width: 767px) {
.sqs-block-video {
padding: 0 !important;
margin: 0 !important;
}
}
This ensures your video block remains clean and well-aligned across all devices.
Final Result
With this CSS setup, your video would:
Place sections flat against section ends or adjacent block pieces
Fit for grid-based layouts or image sections
Trim unnecessary space for crisp, clean tones for your site.
Frequently Asked Questions (FAQ)
-
Internal padding and margins ensure blocks stay visually balanced within your layouts with Squarespace 7.1. This helps with consistency, but can create extra white space when you want to videos to line up edge-to-edge.
-
If you use the global CSS snippet, it removes padding for all video blocks. If you want to control only one block, then choose its specific block ID instead – this way, only the video is affected.
-
Right-click on the video → select Inspect → locate the HTML element with an ID like #block-yui_3_17_2_1_xxxxx. Copy that ID into your CSS to style only that block.
-
Yes, but you should add a mobile media query to ensure videos stay aligned on smaller screens. For example:
@media screen and (max-width: 767px) {.sqs-block-video { margin: 0 !important; padding: 0 !important; }
}
-
This adjustment only changes layout and spacing. It won’t affect video resolution or compression (Squarespace still optimizes video files). For sharper playback, use YouTube, Vimeo, or external hosting with embed codes.
