Embedding videos on a website can greatly enhance user experience, but sometimes fullscreen video displays can be distracting or unnecessary, especially on landing pages or sections where other elements also need visibility. If you’re looking to disable fullscreen video in Squarespace, this guide will show you how to make your videos more embedded and less immersive, improving navigation and maintaining a balanced design.
Page Contents
Why Disable Fullscreen Video in Squarespace?
While fullscreen videos have a strong visual impact, disabling fullscreen video may be preferable if:
- Distraction-Free Design: You want to reduce distraction and allow visitors to focus on other elements.
- Better Accessibility: Smaller, embedded video formats make it easier for users to read accompanying text or navigate nearby content.
- Control Over User Experience: By keeping the video inline, users don’t feel “locked in” by a fullscreen display and can interact with other site areas.
Methods to Disable Fullscreen Video in Squarespace
Here are several ways to disable fullscreen video or modify its behavior within your Squarespace site.
Method 1: Adjusting Video Block Settings
- Add a Video Block: Go to the page where you want the video to appear and insert a Video Block.
- Disable Autoplay and Background: Ensure you’ve unchecked any autoplay or background video options, which often trigger fullscreen behavior.
- Keep Video Controls Visible: Make sure the video controls are enabled, which will prevent it from defaulting to a fullscreen mode.
Method 2: Embed Video Using Custom Code
If the default Squarespace video settings don’t provide enough control, try embedding the video with custom code to prevent it from going fullscreen.
- Copy Embed Code from Video Platform: Go to YouTube, Vimeo, or your video platform and copy the standard embed code.
- Paste Embed Code in a Code Block:
- In Squarespace, add a Code Block.
- Paste the embed code and ensure the allowfullscreen attribute is removed from the iframe code.
Adjust Embed Size: Use CSS styling within the Code Block to control the video’s size, if necessary.
Example embed code:
html
<iframe src=”https://www.youtube.com/embed/your_video_id” width=”640″ height=”360″ frameborder=”0″></iframe>
Method 3: Use CSS to Control Video Display
In some cases, CSS can control video elements and prevent them from automatically displaying in fullscreen mode.
- Access Custom CSS:
- Go to Design > Custom CSS in your Squarespace settings.
- Add CSS Code to Control Fullscreen:
- Paste the following CSS snippet to prevent the video from appearing fullscreen:
css
.sqs-video-wrapper iframe {
width: 100%;
height: auto;
max-width: 640px; /* Adjust max width as needed */
max-height: 360px;
}
- Save Changes: Click “Save” to apply the changes, and check the video to ensure it now appears at the desired size without going fullscreen.
Method 4: Disable Fullscreen Option in Background Video Sections
Squarespace background videos sometimes trigger fullscreen mode when clicked. To prevent this:
- Disable Background Video or Replace with a Static Image: If fullscreen is an issue, consider replacing the background video with a high-quality image.
- Limit Background Video Click Behavior: If disabling the video isn’t an option, you may need custom JavaScript to modify how it behaves on click, although this may require advanced coding knowledge.
Benefits of Embedded Video over Fullscreen
By disabling fullscreen, you get:
- Balanced Visual Flow: Other elements on the page remain visible and accessible.
- Improved Engagement: Users stay on your page longer as they’re not interrupted by fullscreen overlays.
- More Control: You have control over how users view and interact with your videos.
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!
