Adding and Customizing Video Blocks in Squarespace

Written By Elwyn Davies

This tutorial will show you how to add and customize video blocks in Squarespace 7.1 using the Fluid Engine.

Adding Video Blocks

  1. Deleting Existing Images:

    • Select the image you want to replace with a video.

    • Click on the trash can icon to delete it.

    • Repeat for any other images you want to replace.

  2. Creating Space for Video Blocks:

    • Move existing content blocks to create space for your video.

    • You can adjust the format by moving content blocks above or beside the video block later.

  3. Adding a Video Block:

    • Click the "+" button to add a new block.

    • Select "Video" (third down from the left in the pull-up menu).

    • Position the video block where you want it on the page.

    • Adjust the margins and spacing by editing the section settings. You can increase the spacing to around 30 pixels for better separation.

  4. Duplicating and Positioning Video Blocks:

    • Duplicate the video block to add another one.

    • Position the duplicated block where you want it on the page.

    • Customize the section by adjusting the text block width, background color, and other settings for a more refined look.

Customizing Video Blocks

  1. Editing Video Settings:

    • Click on the pencil icon on the video block.

    • Select "Edit" and choose "Add Video."

    • Instead of uploading a video file, use the "Add from a Link" option.

    • Paste the URL of the YouTube video you want to embed.

    • Ensure the link works by checking for a confirmation message ("Video is found and ready for use").

    • Click "Add" to embed the video.

  2. Adjusting Layout for Mobile:

    • Switch to mobile view to check the layout.

    • Adjust the positioning of videos and text blocks to optimize for mobile viewing.

    • Make sure the videos span the full width and the controls are accessible.

  3. Creating a Grid Gallery:

    • To create a grid gallery, add multiple video blocks in a row.

    • Adjust the number of videos per row to fit your design (e.g., three videos per row for a balanced look).

    • Duplicate the row to create a consistent grid layout.

    • You can add custom feature images for each video by selecting the video settings and uploading a thumbnail.

  4. Additional Customization Options:

    • Adjust the spacing between videos by editing the gutter space (e.g., increase to 40 pixels for more breathing space).

    • Customize feature images for a low-key look or leave YouTube thumbnails for better channel visibility.

Final Checks

  1. Preview Mode:

    • Exit editing mode and click the preview arrow to see how the page looks.

    • Ensure all videos are positioned correctly and the layout looks good on both desktop and mobile views.

  2. Subscription and Notification Options:

    • If using YouTube thumbnails, viewers can hover over the video icon to subscribe to your channel and hit the notification bell.

By following these steps, you can effectively add and customize video blocks in Squarespace, creating a visually appealing and functional layout for your website.

NEW COMMUNITY!

I am launching my premium community to help you solve your biggest headaches when building your website or starting a web design business. If you would like to find out more, you can join the waitlist here: https://community.pixelhaze.academy/interest

We also have a free Skool community dedicated to website builders, including Squarespace, Wix (from Autumn 2024), and Hostinger here: https://www.skool.com/website-builders/about

Check Out Square Forge, our Squarespace Template Builder: https://squareforge.net

Elwyn Davies
Next

Creating Gallery Blocks in Squarespace 7.1 (2024)