Squarespace’s fullscreen video blocks look great in a portfolio demo, but they don’t always fit the page they end up on. A fullscreen video takes over the entire viewport, which is exactly the wrong behavior on a landing page where a call-to-action button, pricing details, or a signup form need to stay visible alongside the video rather than getting buried underneath it. If a video is currently locking visitors into a fullscreen player when they’d rather see it embedded inline with the rest of the page, there are a few different ways to fix that depending on which Squarespace video setup is actually in use.

This comes up more often on sites that started with one of Squarespace’s video-forward templates, ones designed around a large hero video by default, and then evolved into something with more mixed content over time. What worked as a striking first impression on a nearly empty homepage starts working against the page once pricing tables, testimonials, and signup forms get added underneath it. The fix depends on exactly how the video was originally set up, so it’s worth identifying which of the four scenarios below actually matches the current page before picking a method.

Squarespace 7.0 vs. 7.1: Where the Video Settings Actually Live

Before troubleshooting fullscreen behavior, it’s worth confirming which Squarespace platform version is in use, since the two handle video blocks differently enough that instructions for one don’t always translate cleanly to the other. Squarespace 7.1, the current version for new sites, uses a unified content block system where video, image, and text blocks all live in the same fluid editing interface, and video settings are accessed by clicking directly into the block. Squarespace 7.0, still running on older sites that haven’t migrated, separates video into a distinct Video Block type with its own settings panel accessed through the block’s gear icon. The underlying CSS classes Squarespace applies, including the sqs-video-wrapper class referenced in the CSS method below, are largely consistent across both versions, but the path to reach the relevant settings differs, so it’s worth checking the specific version before assuming a screenshot or instruction from an older tutorial applies directly.

Why Disable Fullscreen Video in Squarespace

There are a handful of reasons this comes up more often than you’d expect. A distraction-free layout is the most common one: a page selling a product or service usually wants the video supporting the pitch, not swallowing the entire screen and burying the buy button below the fold. Accessibility is a real concern too, since a smaller, embedded video format makes it easier for visitors to read surrounding text or navigate to other page elements without first dismissing a fullscreen overlay. And there’s a simple control argument: keeping video inline means visitors never feel locked into a single element and can keep scrolling, reading, or clicking without an extra step.

Method 1: Adjusting Video Block Settings

The first thing worth checking is whether the video is actually configured to trigger fullscreen in the first place, since Squarespace’s native Video Block doesn’t force fullscreen by default in most cases. Open the page containing the video and check the block’s settings. If autoplay or a background video display mode is enabled, that’s often what’s triggering the fullscreen-style behavior, since Squarespace treats background videos differently from a standard embedded player. Turning off autoplay and switching away from a background video display mode back to a standard inline player usually resolves the issue without touching any code.

It’s also worth confirming the video’s playback controls are visible rather than hidden, since a video without visible controls sometimes defaults to expanding to fill available space in a way that looks like unintended fullscreen behavior even when it technically isn’t. Re-enabling controls in the block settings gives visitors an explicit fullscreen toggle they control themselves, rather than the page forcing that behavior on load.

Method 2: Embed Video Using Custom Code

When the built-in Video Block settings don’t give enough control, embedding the video directly through a Code Block is the more reliable fix, particularly for videos pulled from YouTube or Vimeo. Start by grabbing the standard embed code from the video platform itself rather than Squarespace’s built-in embed tool, since the platform’s own embed code gives more direct control over the iframe attributes.

In Squarespace, add a Code Block to the page and paste that embed code in. The key step is removing the allowfullscreen attribute from the iframe tag before saving, since that attribute is specifically what grants the video player permission to expand into fullscreen mode when a visitor clicks the fullscreen icon. A standard YouTube embed with that attribute removed looks something like this:

<iframe src="https://www.youtube.com/embed/your_video_id" width="640" height="360" frameborder="0"></iframe>

Without allowfullscreen present, the player’s fullscreen button either disappears entirely or stops functioning, depending on the platform. From there, the video’s dimensions can be adjusted with CSS directly inside the same Code Block if the default width and height don’t match the page’s layout.

Method 3: Use CSS to Control Video Display

CSS gives more granular control over how a video renders without needing to touch the embed code itself, which is useful when the fullscreen behavior is more about sizing than the iframe’s permissions. Go to Design, then Custom CSS in the Squarespace settings panel, and add a rule targeting the video wrapper class Squarespace applies automatically:

.sqs-video-wrapper iframe { width: 100%; height: auto; max-width: 640px; max-height: 360px; }

Adjust the max-width and max-height values to whatever fits the page’s actual layout. Save the changes and reload the page to confirm the video now renders at the constrained size rather than expanding to fill the viewport. This approach works well specifically when the video is technically embedding correctly but just rendering larger than intended, rather than a case where fullscreen mode is being explicitly triggered.

Method 4: Disable Fullscreen in Background Video Sections

Squarespace’s background video sections, the kind used in banner or hero areas, behave differently from a standard embedded video and sometimes trigger fullscreen mode specifically when clicked. If a background video section is the source of the problem, the cleanest fix is often replacing the background video with a high-quality static image instead, particularly if the video’s main job was visual atmosphere rather than conveying specific information a visitor needs to watch. Static images load faster, never trigger unwanted fullscreen behavior, and tend to perform better on mobile connections anyway.

If the background video needs to stay in place, limiting its click behavior with custom JavaScript is the more involved option, intercepting the click event and preventing the default fullscreen trigger from firing. This requires more comfort with code than the CSS-only approach above, and it’s worth testing thoroughly across browsers before relying on it, since click behavior for background video elements isn’t always implemented identically across Squarespace’s supported browsers.

Benefits of Embedded Video Over Fullscreen

Keeping video inline rather than fullscreen preserves a more balanced visual flow, since other page elements, navigation, calls-to-action, supporting text, stay visible and accessible rather than getting hidden behind an overlay. It also tends to improve engagement in a subtle but measurable way: visitors aren’t interrupted by a full-screen takeover that pulls them out of the page’s normal reading flow, so they’re more likely to keep scrolling and interacting with whatever comes after the video rather than closing the fullscreen player and losing their place. And it simply gives more control over how visitors experience the page, rather than ceding that decision to a video player’s default behavior.

Vimeo and Other Platforms Behave Slightly Differently

Everything covered so far leans on YouTube as the example, but the same core approach, embedding through a Code Block with the fullscreen-granting attribute stripped out, applies to Vimeo and most other video hosting platforms with a few small differences worth flagging. Vimeo’s embed code uses allowfullscreen the same way YouTube’s does, so removing that attribute from a Vimeo iframe works identically to the YouTube method described above. Vimeo also supports a background=1 parameter in its embed URL specifically for autoplaying muted background video without controls, which is worth avoiding entirely if the goal is to prevent fullscreen-style takeover behavior, since that parameter is built for exactly the kind of full-bleed background treatment this guide is trying to avoid.

Self-hosted video, uploaded directly through Squarespace’s native video block rather than embedded from an external platform, behaves a bit differently since there’s no third-party iframe or embed code to modify. For self-hosted video, the CSS approach in Method 3 is generally the more reliable fix, since there’s no allowfullscreen attribute to strip out of an iframe that doesn’t exist in that setup. Squarespace’s native HTML5 video player does still expose a fullscreen control by default, and removing it entirely typically requires a bit of custom CSS targeting the video controls directly, which varies enough by template that testing on the specific site’s actual player is worth doing rather than assuming a generic CSS snippet will match exactly.

SEO and Performance Considerations

Video embeds carry SEO weight beyond the visual fullscreen question, and it’s worth handling both at the same time rather than revisiting the page twice. A video that autoplays in the background adds page weight and can slow down Core Web Vitals scores, particularly Largest Contentful Paint if the video file is large and loads before the rest of the page’s critical content. Switching from an autoplaying background video to a click-to-play embedded player, which is effectively what disabling fullscreen and background modes accomplishes here, tends to improve page load performance as a side effect, since the video only loads its full player and begins buffering once a visitor actually clicks to play it rather than loading immediately on page load.

For YouTube and Vimeo embeds specifically, using the platform’s lightweight embed options, where available, defers loading the full video player script until a visitor interacts with a thumbnail, which shaves meaningful load time off pages with multiple video embeds. This is a separate optimization from the fullscreen fix covered above, but the two pair well together since both point toward the same underlying principle: let the visitor opt into the full video experience rather than forcing it on them by default.

Checking Video Behavior on Mobile

Mobile browsers handle fullscreen video differently from desktop in ways that are easy to miss if testing only happens on a laptop. iOS Safari in particular has its own native fullscreen behavior for HTML5 video that can override some of the CSS-based fixes above, since Safari sometimes forces fullscreen playback on mobile regardless of what the surrounding page CSS specifies. Testing directly on an iPhone or iPad, rather than trusting a desktop browser’s mobile emulation mode, is the only reliable way to confirm a fix actually holds up on the devices where a meaningful share of traffic will land.

For YouTube embeds specifically, adding the playsinline parameter to the embed URL helps prevent the automatic fullscreen takeover on iOS, since it tells the video to play within its existing frame on the page rather than triggering the browser’s native fullscreen mode automatically. This parameter needs to be added directly to the iframe’s src URL, which means it only works through the custom Code Block approach from Method 2, not through Squarespace’s native Video Block settings.

Troubleshooting When None of These Fixes Work

If fullscreen behavior persists after trying the above, the most likely culprit is a template-level setting rather than anything specific to the individual video block. Some Squarespace templates apply their own video styling globally through the template’s built-in CSS, which can override a page-specific Custom CSS rule if the specificity or load order doesn’t favor the custom rule. Checking the template’s documentation for any built-in video display settings, or testing the same fix on a different template to isolate whether the issue is template-specific, narrows down where the conflict is actually coming from.

Browser caching is worth ruling out too before assuming a fix didn’t work. Squarespace’s CSS and JavaScript get cached aggressively by both the browser and, on some plans, a CDN layer in front of the site, so a change that looks like it didn’t take effect sometimes just hasn’t propagated yet. A hard refresh, or testing in a private browsing window, rules that out quickly before spending more time debugging a fix that actually worked but hadn’t visibly updated yet.

A third-party plugin or injected script is worth checking too, particularly on sites that have accumulated custom code snippets over time from different developers or past redesigns. Squarespace’s Code Injection panel, found under Settings, lets site owners paste custom scripts into the page head or footer, and it’s not uncommon for an old script from a previous video setup to still be running quietly in the background, overriding a newer fix without anyone realizing it’s still there. Reviewing what’s actually sitting in Code Injection, and removing anything tied to a video setup that’s no longer in use, clears up conflicts that are otherwise difficult to diagnose from the CSS alone.

When Fullscreen Video Is Actually the Right Call

None of this is an argument that fullscreen video is always the wrong choice, and it’s worth saying that plainly before finishing up. A dedicated video landing page, a film portfolio, or a hero section where the video itself is the entire point of the page rather than one element supporting a broader layout can genuinely benefit from a fullscreen, immersive treatment. The distinction that matters is whether the video is meant to be the primary focus of that specific page or a supporting element alongside other content competing for attention. A wedding videographer’s showcase page benefits from letting a video take over the screen; a SaaS product’s pricing page generally doesn’t, since a visitor trying to compare plans doesn’t want a video blocking that comparison. Matching the video’s presentation to what the page is actually trying to accomplish matters more than a blanket rule in either direction, and it’s worth revisiting that judgment call whenever a page’s purpose changes, since a hero video that made sense for a launch announcement doesn’t necessarily still make sense six months later once the page has settled into an ongoing sales or signup role.

A Testing Checklist Before Calling It Done

Once a fix from the methods above has been applied, running through a short checklist catches the edge cases that a single quick look often misses. Test the video on both desktop and mobile, since fullscreen behavior, as covered above, doesn’t always match between the two. Test in more than one browser, Chrome and Safari at minimum, since Safari’s native video handling on both macOS and iOS occasionally behaves differently from Chromium-based browsers even with identical CSS and embed code. Clear the browser cache or test in a private window to rule out a cached version masking whether the fix actually took effect. And if the site uses a CDN or Squarespace’s own caching layer, allow a few minutes for that cache to clear before concluding a fix didn’t work, since propagation delay is a common false negative in this kind of testing.

It’s also worth checking the fix doesn’t break something else in the process. Removing allowfullscreen from an embed, for instance, also removes the visitor’s ability to voluntarily choose fullscreen if they want a larger view for a genuinely detailed video, like a tutorial with on-screen text that’s hard to read at a small embedded size. If that tradeoff matters for the specific video in question, the CSS sizing approach in Method 3 is usually the better fix, since it controls the video’s default display size without removing the visitor’s own option to expand it manually if they choose to.

Ready to Customize Your Squarespace Site Further?

If you’re looking to personalize or fine-tune your Squarespace site with more advanced features, Brndle offers expert web development services to make your site stand out. Contact us for professional solutions tailored to elevate your Squarespace experience.

Whether the fix is a simple settings toggle or a full Code Block replacement, the underlying goal is the same: making the video support the page rather than take it over. Once fullscreen behavior is under control, it’s worth taking a second pass at the page as a whole, checking that the video’s new size and placement still feel intentional next to whatever content sits around it, rather than treating the fullscreen fix as the final step in isolation.