Skip to Content

How to Change Video Block Size in Squarespace

If you’re a Squarespace user, you may have encountered issues with the size of your video blocks. Fortunately, adjusting the size of your video blocks is a simple process that can be done in just a few steps. By following these steps, you can ensure that your videos are displayed in the right size and aspect ratio.

To begin, you’ll need to access your site’s custom CSS. This can be done by going to Design → Custom CSS and pasting the following code: .video-block .video-player { padding-bottom: 120 % }. Once you’ve pasted the code, you can adjust it to fit your video ratio.

Another option for resizing your video block is to store your video in a Gallery page that is not linked. Then, create a regular Layout Blank Page where you can add your video as a summary block (with just 1 item per row since you only have 1 item). This method can be done on Brine, as seen in this example: https://www.borisprimerenovation.com/press. By using these methods, you can ensure that your videos are displayed in the right size and aspect ratio on your Squarespace site.

Related Posts:

Understanding Video Block Size

When adding videos to a Squarespace website, it is important to understand the video block size. The default size for a video block is determined by the Squarespace template being used. However, users can adjust the video block size to fit their specific needs.

To adjust the video block size, users can add custom CSS code to their website. This code can be added to either the entire website or to a specific video block. By adjusting the padding-bottom value in the CSS code, users can change the video block size. For example, a padding-bottom value of 56.25% will result in a video block size of 16:9 ratio.

It is important to note that adjusting the video block size may affect the video’s aspect ratio. Users should test different padding-bottom values to ensure that the video maintains its intended aspect ratio.

In addition to adjusting the video block size, users can also add a block ID to the CSS code to change the size of only one block at a time. This can be useful for websites with multiple videos of different sizes.

Related Posts:

Accessing Squarespace Editor

To change the video block size in Squarespace, you need to access the Squarespace Editor. Here are the steps to access the Editor:

Login Process

To access the Squarespace Editor, you first need to log in to your Squarespace account. To do this, follow these steps:

  1. Go to the Squarespace login page.
  2. Enter your email address and password.
  3. Click on the “Log In” button.

Navigating to Website Dashboard

Once you have logged in to your Squarespace account, you will be taken to the Website Dashboard. Here’s how to navigate to the Website Dashboard:

  1. Click on the “Settings” button in the left-hand menu.
  2. Click on the “Website” button.
  3. Click on the “Edit Website” button.

You will now be taken to the Squarespace Editor, where you can make changes to your website, including changing the video block size.

Related Posts:

Locating Video Block

To change the size of a video block in Squarespace, you must first locate the video block on your site. There are two ways to do this: using Squarespace search or manual navigation.

Using Squarespace Search

Squarespace search is a quick and easy way to locate a specific video block on your site. To use Squarespace search:

  1. Log in to your Squarespace account and navigate to the page where the video block is located.
  2. Click the search icon in the top-right corner of the screen.
  3. Type “video block” into the search bar and press enter.
  4. The search results will show all the video blocks on your site. Click the one you want to edit.

Manual Navigation

If you prefer to navigate your site manually, you can locate the video block by following these steps:

  1. Log in to your Squarespace account and navigate to the page where the video block is located.
  2. Hover over the video block until a gear icon appears in the top-right corner of the block.
  3. Click the gear icon to open the video block editor.
  4. From here, you can change the size of the video block using custom CSS or by adjusting the padding.

Related Posts:

Changing Video Block Size

Squarespace allows users to easily change the size of video blocks by using drag handles or entering exact dimensions.

Using Drag Handles

To resize a video block using drag handles, follow these steps:

  1. Hover over the video block and click on the drag handle located on the bottom right corner.
  2. Drag the handle to adjust the size of the video block.
  3. Release the handle to apply the changes.

Entering Exact Dimensions

To resize a video block by entering exact dimensions, follow these steps:

  1. Click on the video block to open the Video Block editor.
  2. In the editor, click on the “Design” tab.
  3. Under “Video Dimensions,” enter the desired width and height values.
  4. Click “Apply” to save the changes.

It’s important to note that changing the video block size may affect the quality and aspect ratio of the video. It’s recommended to test the video block on different devices to ensure it looks and functions as intended.

Related Posts:

Saving and Previewing Changes

Saving Changes

Once you’ve made changes to your video block size in Squarespace, it’s important to save them. To do this, simply click the “Save” button located in the top right-hand corner of the editor. Squarespace will automatically save your changes, so you don’t need to worry about losing your work.

Preview Mode

Before publishing your changes, it’s always a good idea to preview them first. This will give you an idea of how your video block will look on your website. To do this, click the “Preview” button located in the top right-hand corner of the editor. This will open up a new tab with a preview of your website.

In preview mode, you can navigate your website as if it were live. This will give you a chance to test out your video block size and make any necessary adjustments before publishing your changes.

Related Posts:

Troubleshooting Common Issues

Video Not Resizing

If you’re having trouble resizing your video block in Squarespace, there are a few things you can try to fix the issue. First, make sure that you’re using the correct method to resize the block. Depending on the editor you’re using, you may need to use different methods to resize the block. Check out Squarespace Help Center’s article on resizing blocks for more information.

If you’re still having trouble, try clearing your browser cache and refreshing the page. This can sometimes help with display issues. You can also try resizing the video block in a different browser to see if the issue is specific to your current browser.

Changes Not Saving

If you’re making changes to your video block in Squarespace but they’re not saving, there are a few things you can try to troubleshoot the issue. First, make sure that you’re connected to the internet and that your connection is stable. A weak or unstable internet connection can sometimes cause issues with saving changes.

If you’re still having trouble, try clearing your browser cache and refreshing the page. This can sometimes help with display issues. You can also try making the changes in a different browser to see if the issue is specific to your current browser.

Related Posts:

Additional Tips for Video Blocks

Optimizing Video Size

When adding videos to your Squarespace website, it’s important to optimize their size to ensure fast loading times and a smooth user experience. Large videos can slow down your website, causing frustration for visitors and potentially leading to a high bounce rate.

To optimize your video size, consider compressing your videos before uploading them to Squarespace. This can be done using video editing software or online tools like Handbrake or CloudConvert. Additionally, you can adjust the video block ratio in Squarespace to fit your video size for optimal viewing.

Considerations for Mobile Viewing

With the increasing use of mobile devices, it’s important to consider how your videos will appear on smaller screens. Squarespace websites are mobile-responsive, but it’s still important to ensure that your videos are optimized for mobile viewing.

One way to optimize your videos for mobile is to use smaller file sizes and lower resolutions. You can also consider using shorter videos or breaking up longer videos into smaller segments. Additionally, it’s important to ensure that your video controls are easily accessible on mobile devices.

Related Posts: