Embed a YouTube Video That Autoplays and Loops On Squarespace

Autoplay videos or gifs are an easy way to liven up your Squarespace website. Because they quickly capture your readers’ attention, autoplay videos are perfect for showcasing

  • Short tutorials

  • Product demos

  • Montages of event or trip highlights

  • Important messages for your readers

  • Discounted offers

  • And much more!

But the downside to gifs and videos is that they can be quite large. Add multiple gifs or videos to a page, and you are sure to slow down your website!

Not to mention, videos will fill up your Squarespace storage fast. Squarespace only allows you to upload 30 minutes of video content, which isn’t much. For more video time, you are required to pay for extra media storage.

To avoid this, try embedding a YouTube Video that autoplays as soon as the page is loaded and continues to loop through once the video is done!

In the following video I show you how to achieve this on your own Squarespace website. The code used in the video is provided below.

 
 

The following code is used in the video:

<center><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/*******?playlist=*******&autoplay=1&controls=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe></center>
 

Update: How to Embed a Video in Squarespace in 2022

squarespace embed block in fluid engine

Squarespace embed block

Squarespace has made many changes to their editor since I filmed this video, including a massive shift from the classic editor to the new fluid engine editor.

Due to these changes, you can no longer use a video block to embed autoplay videos on your Squarespace website…although you can still upload or embed a regular video that way.

To embed an autoplay video in your Squarespace website, you will need to add the ‘Embed’ block to your page. This block looks very similar to the ‘Video’ block, and still offers the two options of pasting your video link or pasting the embed code.

Once you add an embed block, it’s as simple as the instructions in my tutorial! Simply copy and paste the code listed above into the embed block. Then replace the asterisks with the string of letters and numbers that identifies your YouTube video.

 

Best Practices for YouTube Autoplay on Squarespace

Before embedding YouTube autoplay videos on your Squarespace website, make sure you are optimizing the experience for your website visitors.

  1. Mute your autoplay videos.

    Nobody likes it when you open a webpage and suddenly there’s a video blasting through your laptop speakers on full volume! That’s why web browsers usually block autoplay videos unless they are muted or don’t contain audio. To make sure your embedded videos won’t be blocked, the code snippet I have provided above automatically mutes your autoplay videos for you.

  2. Use subtitles.

    Because your autoplay video will be muted, it’s a good idea to make sure your YouTube video has subtitles. A large portion of your website visitors will never unmute the video, so enabling subtitles ensures that they will still receive the video content.

  3. Keep it short!

    Autoplay videos are a great way to grab attention when visitors land on your page. But if your videos are long and don’t contain content that your website visitors care to watch, you risk losing their attention just as fast. You can end up frustrating your viewers, pushing them to leave your website instead of staying on the page.

 

Embedding autoplay YouTube videos that loop on your Squarespace website is an easy way to spice up your website. But autoplay videos aren’t always the best choice for your content. When embedding a video in your Squarespace website, it’s up to you to decide whether the video will be better when set to autoplay, or when embedded regularly for visitors to click on to play.

 
 
Rebecca Grace

Rebecca Grace is a Squarespace CSS Expert and Website Designer.

https://rebeccagracedesigns.com
Previous
Previous

Add A Facebook Messenger Chat Box To Your Squarespace Website

Next
Next

Rebecca Grace Designs' Before and After Image Sliders