How to Embed a YouTube or Vimeo Video that autoplays and loops on Squarespace
**See updated blog on video autoplays and loops**
This tutorial will guide you through the process of embedding a YouTube or Vimeo video on your Squarespace website that automatically starts playing and loops continuously. The code provided in this tutorial is compatible with both Squarespace 7.0 and 7.1 versions. By following the steps outlined, you'll be able to enhance the multimedia experience on your Squarespace site by incorporating autoplay and looping functionality to your embedded YouTube or Vimeo videos.
Complexity: Intermediary
We recently did a project for a client and one of the main requirement was that the video autoplay was muted and loop. There are many reasons why you may want to do this.
To bring more creativity to the site
More Dynamism to the site
Images simply cannot convey the message you want to portray.
We tried both Youtube and Vimeo and while the both worked, Youtube had an issue of not be responsive in term of height as compared to Vimeo. Below are the code for embedding autoplay and loop videos from both Youtube and Vimeo
For Vimeo;
You can use the code below
<div style="padding:56.25% 0 0 0;position:relative;"> <iframe src="https://player.vimeo.com/video/[value]?autoplay=1&loop=1&title=0&byline=0&portrait=0&autopause=0&muted=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
This is a sample video URL https://vimeo.com/448265508 used, so you replace [value] with 448265508, see below
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/448265508?autoplay=1&loop=1&title=0&byline=0&portrait=0&autopause=0&muted=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
To embed the code you will need a Embed block for this.
For Youtube
This is the same video on Youtube https://www.youtube.com/watch?v=lIczcIdgMUo.
What you need is the value of v which in this case is 'lIczcIdgMUo' and you will need to paste in this Youtube code below:
<iframe width="100%" height="315" src="https://www.youtube-nocookie.com/embed/[value]?playlist=[value]&autoplay=1&controls=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>
Simply replace [value] with the real value of v, which in this case is lIczcIdgMUo as shown below:
<iframe width="100%" height="315" src="https://www.youtube-nocookie.com/embed/lIczcIdgMUo?playlist=lIczcIdgMUo&autoplay=1&controls=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>
To embed the code you will need a Embed block for this.
