Want to showcase your YouTube videos in an elegant, interactive carousel on your Squarespace website? This step-by-step guide will show you how to create a professional-looking video carousel with autoplay functionality that works seamlessly on both desktop and mobile devices.

Prerequisites

Before we begin, make sure you have:

• A Squarespace website (version 7.1)

• YouTube video links ready to embed

• Access to your Squarespace site's code injection settings

• Basic understanding of copying and pasting code

Step-by-Step Implementation

Step 1:

1. Create a new page or edit an existing one

2. Add a Code Block element where you want the carousel to appear

Step 2: Insert HTML structure:

Step 3: Prepare Your Video IDs

Before we dive into the code, you'll need to gather your YouTube video IDs. Here's how to find them:

1. Go to your YouTube video

2. Look at the URL: https://www.youtube.com/watch?v=XXXXXXXXX

3. The part after v= is your video ID

4. Copy these IDs - you'll need them in the next step

For example, if your YouTube URL is https://www.youtube.com/watch?v=8ORwAv5vlVo, then 8ORwAv5vlVo is your video ID.

Important Notes:

• Keep the ?enablejsapi=1 at the end of each video URL

• Don't remove any of the navigation divs

• Make sure each video is inside its own swiper-slide div

• The code works with any number of videos

Common Mistakes to Avoid:

1. Don't forget to wrap each iframe in a swiper-slide div

2. Don't remove the enablejsapi=1 parameter

3. Make sure your video IDs are correct

4. Keep all the navigation elements even if you don't plan to use them

Now that you have your HTML structure ready, you'll need to add the required CSS and JavaScript code to make it functional. Would you like me to explain those parts next?

Step 4: Prepare Your Code Injection

First, we need to add required libraries to your Squarespace site's header.

1. Add this code to Settings > Advanced > Code Injection > Header

In the Header section, add the following code:

Step 5: Initialize the Carousel

Add this JavaScript code to your Footer Code Injection:

Step 4: Style Your Carousel

Add these CSS rules to Design > Custom CSS:

Mobile Optimization

Add these styles to ensure your carousel works perfectly on mobile devices:

Troubleshooting Common Issues

1. Videos Not Playing

   • Check if all YouTube IDs are correct

   • Verify that enablejsapi=1 is included in the iframe URLs

   • Ensure all code injections are properly saved

2. Carousel Not Responsive

   • Verify all CSS is properly added

   • Check for any conflicting styles

   • Ensure mobile CSS is included

3. Navigation Buttons Not Working

   • Confirm Swiper JS is properly loaded

   • Check browser console for errors

   • Verify navigation elements are properly named

Customization Options

You can customize your carousel by adjusting these parameters:

1- Autoplay Speed (javascript)

2- Carousel Height (CSS)

3- Navigation Button Colors (CSS)

Conclusion

You now have a professional-looking, auto-playing YouTube video carousel on your Squarespace website! This feature will help keep your visitors engaged and make your content more accessible. Remember to regularly update your videos and monitor their performance through YouTube Analytics.

[Note: This tutorial is current as of January 2025. While we strive to keep our content up-to-date, Squarespace's interface and features may change.]