How to make a video autoplay on Squarespace

Adding autoplay videos to your Squarespace website can be a great way to engage visitors and draw attention to important content. Autoplay videos are especially useful for product demonstrations, tutorials, or promotional material. In this guide, we’ll discuss three different methods of adding autoplay videos to your Squarespace site: YouTube embeds, HTML video tags, and SmartVideo (Swarmify).

How to Add an Autoplay YouTube Video to Your Squarespace Site

YouTube is one of the most widely used video hosting services. Fortunately, adding a Squarespace autoplay video to your site is straightforward. That said, there are several reasons why an alternative hosting service, free of traffic leaks and distractions, is a better choice for businesses.

The first step is to go to your YouTube video and select your video. On the watch page of your video, find the like and dislike buttons beneath the video’s title. Directly to the right of them is the “Share” button. Click it.

This will pull up a series of social media links. Click “Embed.”

A new window will pop up, which gives you your embed code. Clicking “Copy” copies the embed code to your clipboard.

Now you have your embed code. However, this code will not autoplay the video. To enable autoplay, we’ll need to edit it. Paste the code into a simple text editor such as Notepad.

Locate the URL for the video in the embed code. It will look something like this:

src="https//www.youtube.com/embed/xyz"

Right at the end of that URL, within the quotation marks, add this:

?autoplay=1&mute=1

Your code should now look like this:

src="https//www.youtube.com/embed/xyz?autoplay=1&mute=1"

This change to the code activates autoplay and mutes the video by default. Many browsers, including Chrome, Safari, and Firefox, will attempt to block a video from auto-playing if it is not muted.

Now that you have your edited code go back to your Squarespace site. Scroll down to the section of the site where you want your video. If you do not have a separate section yet, add one using the blue button – Add Section.

Then, click the pencil button in the upper-right-hand corner of the section to Edit the section.

You will then see several different elements you can add. Under the heading Basic, look for the option to add a new code block. Click </> Code.

Finally, simply copy the embed code from your text file and paste it into the code editor. Your site will automatically refresh, and your video will appear. That's how you embed a YouTube video

How to Embed an Autoplay Video Using HTML Tags

If you have a video that you have not uploaded to YouTube or any other video hosting site, you can use Squarespace itself as your host. Ensure that your video meets the requirements set for uploaded videos.

The first step is to open the Asset Library.

Then, drag and drop your video file from your computer into the Asset Library to start the uploading process.

Once your video has been uploaded, click the File Details button (three dots in the corner of the video). Then, find the new URL of your uploaded video.

Copy that URL and paste it into a text editor like Notepad. Then, add the HTML tag around the URL like this:

<video controls autoplay muted src="[URL]"></video>

Once you have your video HTML code ready, you can then add a Code block (using the previously mentioned method) and paste your code into it.

How to Add an Autoplay SmartVideo to Your Squarespace Site

When you put videos on your site, you want them to load rapidly and be free of distractions. The best way to do this is to utilize a content delivery network like Swarmify. With SmartVideo from Swarmify, you can have complete control over your video content, eliminating traffic loss from distracting ads.

Furthermore, Swarmify possesses a globally distributed network of servers carefully designed to deliver video content to viewers faster than any other service. Adding an autoplay SmartVideo to your Squarespace site is simple.

First, you’ll want to set up your SmartVideo account. Once you have completed the account setup, you will be given some script code as well as a swarmcdnkey which is required for your video to be delivered by Swarmify.

Next, install SmartVideo on your Squarespace site. Click settings.

Click Advanced.

Then click Code Injection.

After that, paste the code snipped you received with your key into the Header textbox.

Finally, click Save.

Once you have saved your changes, SmartVideo will be fully installed on your site. If you have any YouTube videos on your site, SmartVideo will automatically start converting them into distraction-free videos. If you have a video from another source, you will need to use the SmartVideo tag.

As with the previous other methods, this will be accomplished using a new code block. Head to your Squarespace site, go to the section where you want your video, click Edit, and then click, </> Code.

Once you have your code box, you will then want to add the SmartVideo tag using the following syntax:

<smartvideo src="[URL]" width="1280" height="720" class="swarm-fluid" poster="path/to/my/image.png" controls muted autoplay></smartvideo>

This code will add the video to your site. The URL should be the link to your video. SmartVideo supports Vimeo, Amazon S3, Google Cloud Storage, Dropbox, and Google drive links, to name a few.

The controls option enables users to pause and play the video. The muted and autoplay options work similarly to the other methods we covered in this guide.

Why SmartVideo is the Best Option For Your Business

Of the three options we have listed, there are several key reasons why SmartVideo is the clear winner when it comes to adding video content to your site. The first option relies on YouTube. Although YouTube is a fast player that is highly familiar to users, it has its drawbacks. The main issue with YouTube is the ads that can play before your video starts.

These ads can distract leads and end up diverting traffic away from your site and your brand. This is the price you pay for being able to embed your videos using YouTube for "free". Additionally, at the end of a YouTube video, the platform invariably recommends other videos which may or may not be on-topic for your site.

The second option relies on Squarespace hosting your video. However, Squarespace places limits on the format and length of your videos, depending on where you want them uploaded to your site. For instance, the Video element in a section of your site restricts you to a 60-second max upload. Furthermore, Squarespace was never designed as a video hosting service and should not be relied upon to deliver lightning-fast results.

The third option is to use SmartVideo, either automatically or through the SmartVideo tags. This option allows you to have fast video delivery that is free from traffic-siphoning advertisements. Plus, SmartVideo is faster. Our player loads over 12x faster than YouTube’s player!

Furthermore, YouTube offers you almost no customer support. Swarmify, on the other hand, gives you access to an experienced and friendly support team that is ready to help you with whatever you need.

Don’t wait to get started with Swarmify Today!

MAKE THE SWITCH