Creating a full bleed video on Squarespace refers to making a video that spans the entire width of the page, reaching from edge to edge without any margins. Achieving this effect involves a few steps and considerations, including selecting the right Squarespace template and applying the appropriate settings. Below is a comprehensive guide to help you achieve a full bleed video on your Squarespace site.

Step-by-Step Guide to Creating a Full Bleed Video on Squarespace

1. Choose the Right Template

• Template Compatibility: Not all Squarespace templates support full bleed images or videos. Templates from the Brine family (e.g., Brine, Farro, and others) are known for their flexibility with full-bleed elements. Check if your current template supports this feature.

2. Upload Your Video

• Hosting the Video: Full bleed videos on Squarespace need to be hosted on a third-party platform because Squarespace’s built-in video upload feature has limitations. Common platforms include YouTube, Vimeo, or Wistia.
• Get the Embed Code: Once you have uploaded your video to the chosen platform, obtain the embed code provided by the platform. This code can usually be modified to fit the full width of your web page.

3. Add a Full Width Section

• Edit Your Page: Navigate to the page where you want to add the full bleed video. Enter the Squarespace editor by clicking on “Edit” on the page you are editing.
• Add a Section: Click on “Add Section”. Choose a blank section to start from scratch or a pre-built section that supports full-width content.

4. Embed the Video

• Insert Code Block: Inside the section, click on the “+” icon to add a block, then choose the “Code” block.
• Paste Embed Code: Paste the video embed code you copied earlier into the code block. Adjust the embed code if necessary to ensure it stretches the full width of the section. For example, with YouTube, you may need to modify the iframe attributes to width="100%". For Vimeo and other platforms, ensure the iframe width is set to 100%.

5. Adjust Styling with CSS

Sometimes, to ensure the video truly spans edge to edge and maintains responsive design, you may need to add custom CSS. - Add Custom CSS: Go to Design → Custom CSS and add the following CSS code to ensure full-width and responsiveness:

 ```css
.sqs-block-code {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
.sqs-block-code iframe {
width: 100vw;
height: auto;
}
```
This ensures the code block and the embedded video within it stretch fully across the viewport width.

6. Preview and Adjust

• Preview Your Page: Preview your page to see how the video looks. Ensure that the video stretches fully from edge to edge and adjusts properly across different screen sizes.
• Fine-tune if Necessary: Be prepared to tweak the custom CSS or the embed code to achieve the desired look. Squarespace’s platform allows for live previews, which makes this process easier.

7. Publish Your Changes

Once you are satisfied with the appearance and functionality of the full bleed video, go ahead and publish your changes. Ensure you check the video across different devices to confirm its responsiveness.

Additional Considerations

• Video Quality and Load Time: High-quality videos can significantly impact page load time, so consider optimizing your video for the web to strike a balance between quality and performance.
• Autoplay Settings: Some users like autoplay videos for a more dynamic look, but be mindful of user experience and browser restrictions. Most modern browsers restrict autoplay with sound, so configure your video for autoplay without sound if required.
• Mobile Responsiveness: Always test your design on multiple devices to ensure the video displays correctly on mobile screens.

By following these steps, you can effectively add a full bleed video to your Squarespace website, creating a visually appealing, edge-to-edge design element that enhances user engagement.