So you want to add some nice vertical short-form video to your Squarespace site and have decided YouTube shorts is a good way to do it. A great start!

The beauty of a short video is it's snappy and to the point, so you put a bunch of different videos together.

Doing that with shorts isn’t that simple though. There are a few problems:

1. You’ll have YouTube logos all over your website, making it off brand
2. Shorts might lead into content suggestions that are completely irrelevant to your company
3. Playing a new video doesn’t stop the video that’s currently playing
4. It can slow down your site
5. There are no autoplaying previews for engagement

You can fix all of that by using a specialist video embedding software like Clipara. Purposefully built for short form content.

You can create carousels, grids, or embed individual videos with your own custom styling, full-screen mobile experiences (just like being in an app), smooth changeovers between videos, and much more. It’s incredibly simple to use too, and covers all aspects of making videos responsive across devices, autoplaying, muting, etc.

With that, you can easily carousels that open to a full-screen player like this:

‍

‍
or experiences that play in line like this one:

‍
All of this is completely customisable without any code and has lots of other layout and customisation options. The end result is something much more professional than embedding lots of YouTube shorts. Clipara also has a YouTube integration where you can provide the YouTube link and it will add it straight to your Clipara library. You can try Clipara for free here.

If you do just want to grab the embed code for YouTube shorts and put it straight into your site and leave it as a YouTube embed, you can do so with the quick steps below. This will show you how to create responsive Embeds in Squarespace that you can drag to be the size you want (rather than fixed size).

Getting the embed code for a responsive embed

The embed code for a YouTube short provided by YouTube provides a fixed size embed, that isn't responsive to different screens.  To do that, you can right click on a YouTube short and click copy embed code, but the video will be in fixed dimensions, so it's not a great way to embed it in your site.

‍

Instead, we'll show you how to do it without those problems. First grab the video ID from the YouTube short URL

Then use the code below, changing the string after /embed/ in the YouTube URL and changing the Title too (or remove it)

<style>
  .video-wrapper {
    position: relative;
    width: 100%;
    /* The padding-top percentage is calculated as (height / width) * 100% for a 9:16 ratio */
    padding-top: 177.77%; /* (16/9) * 100 */
  }

  .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
<div class="video-wrapper">
  <iframe src="https://www.youtube.com/embed/CjO9JVlbQSM" title="Olivia Dean - felt like a fluffy dream !!! #shorts" frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
  referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>

‍

Next, head to the Squarespace editor and add an embed block into your page:

‍

You'll notice there is the option to paste a link, which might make you think you can just add a the whole YouTube link there. But you'll find it looks like this, in landscape with space to the side of the video. This is probably not what you want.

‍

So instead, we're going to toggle to Code Snippet, and use the code provided (after changing the ID) to paste in the code, like so:

‍

You'll see the video is now vertical, but also responsive. You can now click and drag the embed block to resize it however you like on different screen sizes.

‍

All in all, adding it to your site is pretty quick, but just using the YouTube embed isn't a great experience for your customers. It can slow your site down and also isn't very on brand and can drive people off your site. So give Clipara a try with a free account and create a much better experience for your customers. You can create a free account here.

‍

Create and install a custom embed with Clipara

Here’s a step-by-step guide on how to create a custom video carousel using Clipara for free:

‍

Step 1: Create a Campaign. Start by clicking Create Campaign on the Clipara homepage.

‍

‍

Step 2: Select 'On-Site' Campaign Type. Choose the on-site option to embed the carousel on your site.

‍

‍

Step 3: Choose the 'In-Line' Player Style. In-line plays videos directly on the page. Full-screen opens a mobile and desktop immersive player.

‍

‍

Step 4: Add Video. Click Upload Video to start uploading content.

‍

‍

Step 5: Import YouTube Shorts. Switch to YouTube, paste the link of the YouTube Short you want, and upload it. Once uploaded, you can rename the video from the YouTube URL. Once done just click Continue.

‍

‍

Step 6: Reorder Videos. Select all of the videos you would like to include in your carousel. Then drag and drop videos to reorder them as you like. Click Create Campaign when you're ready.

‍

‍

Step 7: Create a New Widget. Widgets are layouts that can be reused across campaigns.

‍

Select Carousel for this design. This is the only layout style for In-line campaigns, but for campaigns that open to full screen, you can use grids, carousels, stories, pop-ups and create your own custom embeds.

‍

‍

Step 8: Customise the Carousel. Adjust your carousel to look exactly how you want using the design panel on the left-hand side.

‍

‍

Step 9: Install Your Carousel. Click Install on the upper left-hand side to get the embed code and paste it into your website builder.

‍

‍

You’ll now have a sleek, responsive video carousel across both desktop and mobile devices.

‍

‍

For more details, check out our step-by-step guide on how to add a video carousel to Squarespace. Sign up for Clipara here and see how video carousels can elevate your website's look and performance.