How to Remove the Play Button from Video Grid in Squarespace
Squarespace 7.1 utilizes a robust video framework called Plyr for the insertion and control of video blocks. It comes with this standard-centered play button overlay that’s all fine and good for most designs, but what if you’re designing a minimal video grid layout or a cinematic/feature page where you need to keep that play button out of your thumbnails?
In this guide, we’ll show you how to remove the overlaying play button from video blocks with a quick CSS modification.
The Problem
“I’m constructing a videography gallery; however, each video displays a large circular play button in the centre. How can I remove it?”
Whether you’re showcasing:
A portfolio of cinematic clips
Preview trailers
Background-style looping videos
That default play button overlay can totally kill the vibe.
The Solution: Hide the Play Button with Custom CSS
Here’s the code you need:
/* Remove center play button from Squarespace video blocks */
.video-player .plyr__control--overlaid {
display: none !important;
}
How It Works
.video-player is the wrapper Squarespace uses around each video block
.plyr__control--overlaid targets the circular play overlay in the center
display: none removes it entirely
Optional: Target a Specific Section Only
To prevent this from affecting all videos site-wide, you can limit it to a single gallery or section:
section[data-section-id="YOUR-SECTION-ID"] .plyr__control--overlaid {
display: none !important;
}
To get your section ID, right-click the section in your Squarespace preview → Inspect → look for data-section-id="...".
Bonus Tips
Want a custom play button instead?
You can create your own SVG or PNG icon and position it using CSS or JavaScript for full creative control.
Where to Add the Code
Go to Pages → Custom code → Custom CSS
Paste the CSS at the bottom
Save your changes
That’s it! Your video grid is now clean and distraction-free.
Final Thoughts
Remove the default play button overlay, and you get full control of your video grids and cinematic layouts. Be it presenting creative pieces, creating a gallery of product videos, or crafting a design for a looped video showcase, this tiny CSS solution helps you out a lot in presentation.
And for complete control, you’re not constrained to just removing the button, nor are you limited to just using a design of your own to replace the button as a custom icon, and having the freedom to do things your way, your style. CustomizationsSquarespace enables you to customize your video presentation to match your site’s specific style with only a few lines of CSS.
Frequently Asked Questions
-
Squarespace uses a video framework called Plyr, which automatically places a large play button in the center of video blocks to indicate interactivity.
-
Yes. You can target only a specific section ID so the change applies just to one video grid or gallery, leaving other videos untouched.
-
3) Will removing the play button stop users from playing the video?
No. The video remains playable through the native controls or by clicking the thumbnail. You’re only hiding the large overlay icon.
-
Absolutely. You can add a custom SVG or PNG icon and position it with CSS or JavaScript for a more branded, cinematic look.
-
Go to Design → Custom CSS in Squarespace, paste the snippet at the bottom, and save. The change will apply immediately.
