How do I make a video full screen on Squarespace?

To make a video appear full screen on Squarespace, particularly an embedded video, you'll typically use a combination of embedding the video within a Code Block and applying custom CSS to style its container and maintain its aspect ratio, ensuring it fills the desired section or screen width. Squarespace also offers built-in features for section background videos that naturally achieve a full-section look.

Achieving a Full-Screen Embedded Video Effect

For maximum control over an embedded video's appearance, especially if you want it to stretch across the full width of a section or the browser while maintaining its aspect ratio, the most effective method involves custom code. This approach works well for videos hosted on platforms like YouTube, Vimeo, or Wistia.

Step 1: Embed Your Video Using a Code Block

First, you need to add your video's embed code to a Squarespace page.

Log in to your Squarespace account and navigate to the page where you want to add the full-screen video.
Click the "Edit" button on the page.
Add a new section or edit an existing one. Click an insertion point (the + icon) and select the Code Block from the menu.
Paste your video's embed code into the Code Block. To easily target this video with custom CSS, it's best to wrap your <iframe> (or <video> tag if self-hosting) within a div element with a unique class.

Example Embed Code Structure:
```
<div class="custom-fullscreen-video-wrapper">
  <iframe
    src="https://www.youtube.com/embed/YOUR_VIDEO_ID"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>
```
Remember to replace YOUR_VIDEO_ID with the actual ID of your YouTube or Vimeo video.

Step 2: Apply Custom CSS for Full-Screen Styling

Next, you'll add custom CSS to make the video responsive and fill its container.

From your Squarespace site editor, go to Design → Custom CSS.

Add the following CSS code. This code uses a common technique to create a responsive aspect ratio for embedded videos.

/* Custom Full-Screen Video Wrapper */
.custom-fullscreen-video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100) */
  height: 0;
  overflow: hidden;
  max-width: 100%; /* Ensure it doesn't exceed its parent container */
  background-color: #000; /* Optional: Black background while loading */
}

.custom-fullscreen-video-wrapper iframe,
.custom-fullscreen-video-wrapper object,
.custom-fullscreen-video-wrapper embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0; /* Remove default iframe border */
}

/* Optional: Adjust aspect ratio if your video is not 16:9 */
/* For 4:3 videos: */
/* .custom-fullscreen-video-wrapper.aspect-4-3 { padding-bottom: 75%; } */
/* For 21:9 cinematic videos: */
/* .custom-fullscreen-video-wrapper.aspect-21-9 { padding-bottom: 42.85%; } */

Tip: Adjust the padding-bottom value to match your video's aspect ratio. For example:
- 16:9 (standard widescreen): 56.25% (9 / 16 = 0.5625)
- 4:3 (older standard): 75% (3 / 4 = 0.75)
- 21:9 (cinematic): 42.85% (9 / 21 = 0.4285)

Understanding the CSS

position: relative on the wrapper: This allows you to absolutely position the iframe inside it.
padding-bottom: This is the key to maintaining the aspect ratio. When height is 0, padding-bottom (percentage-based) calculates its value relative to the width of the parent element, effectively giving the wrapper a responsive height based on its width.
height: 0 and overflow: hidden: Used in conjunction with padding-bottom to create the responsive container.
position: absolute, top: 0, left: 0, width: 100%, height: 100% on the iframe: These properties stretch the video iframe to fill its absolutely positioned parent (.custom-fullscreen-video-wrapper), which has the correct aspect ratio.

Other Squarespace Full-Screen Video Options

While custom CSS offers granular control for embedded videos, Squarespace provides built-in options that can also achieve a full-screen or full-width appearance:

Section Background Videos:
Squarespace allows you to add videos as backgrounds to entire sections. These videos automatically fill the entire section, creating a powerful visual impact that many users associate with "full screen." This is ideal for decorative or atmospheric videos that play automatically (often muted and looping).
- To set a section background video:
  1. Edit the page and hover over the section you want to modify.
  2. Click the "Edit Section" (pencil) icon.
  3. Go to the "Background" tab.
  4. Select "Video" and upload a video or paste a link to a video hosted on YouTube or Vimeo.
  5. Ensure the section's padding is adjusted to make the video cover the desired area.
Video Blocks (Standard):
Squarespace's standard Video Block allows you to embed videos from YouTube, Vimeo, or upload your own. While convenient, these blocks typically don't become "full screen" on their own. They will fill the width of the content area they are placed in. To make them truly full-width or full-section, you would generally place them in a full-width section or combine them with custom CSS.

Here's a quick comparison of methods:

Method	Use Case	Complexity	Control Level
Code Block + Custom CSS	Specific embedded videos (YouTube, Vimeo, self-hosted) requiring precise aspect ratio and responsive full-width/section fill.	Moderate	High
Section Background Video	Decorative, ambient videos that fill an entire section, often playing automatically and muted.	Easy	Moderate (no play controls for user)
Standard Video Block	Basic embedding of YouTube/Vimeo/uploaded videos within content areas.	Easy	Low (without extra CSS)

By leveraging these methods, you can effectively integrate full-screen video experiences into your Squarespace website.