How to embed borderless, autoplaying, looping videos on Squarespace

Site URL: https://www.nondysdesigns.com/

Hey guys... I've been trying to find articles on How to embed or upload a video to Squarespace as a Video Block (not banner image) but to disable auto loop/autoplay and also take away the play, pause, hover, etc,. functions.

Basically, I want it to be like a gif, but not using a gif file because gifs are large files that I don't want on the website. I want to use Links from Youtube or Vimeo to create these autoplaying type gifs.

I found what it seems to be a great blog post on how to do it here https://www.justinwyne.com/thoughts/2018/5/15/how-to-embed-borderless-autoplaying-looping-videos-on-squarespace

But the only thing is that I don't think there's enough steps for me to follow along. I have to download a third party application and host my URL somewhere... It all seems supppperrrrr complicated and I'm wondering if there's another way to do this?

I found another post here https://www.rebeccagracedesigns.com/blog/youtube-autoplay-and-loop that is really helpful and is an autoplay video, but the video has the play and pause type of functions that I don't want, also the sound isn't automatically playing either, you have to click on the sound to hear it.

Also something to keep in mind, i'd like to have the end result to be a portrait photo and not in landscape.

Thank you in advanced!

I did some custom code for my client on this site, is it what you want? This feature is a custom plugin for squarespace

http://recordit.co/p9VOuCKBkq

Hi Nondys,

I’m the author of the first link you mentioned.

I totally agree that this is more difficult than it should be. I searched for a bunch of different options and the only viable one I came up with is the method I wrote about.

I’m curious if you have since found any better solution or what you ultimately decided upon.

I’ve also since added more steps to be a more complete walkthrough; though it is still quite complicated. I’ll try and see if I can think of a simpler solution.

Hi @JustinWyne...

Unfortunately not 😞 I wish I did but I haven't found anything yet.

(12 April 2022) - THIS POST IS OUTDATED - SQUARESPACE HAS REMOVED THE EMBED '<>' FEATURE ON VIDEO BLOCKS.  TO USE THIS METHOD YOU NOW HOW TO ADD YOUR IFRAME IN A EMBED BLOCK.  HOWEVER YOU ALSO NEED SOME EXTRA CSS TO MAKE THE IFRAME FILL THE EMBED BLOCK. SEE ANSWER IN POST BELOW.

The best way to do this is to use a squarespace block, Vimeo or Youtube.  

I have used the below code inside Squarespace's video block.  But instead of adding the link, you can click <>  and insert this code below but change out your video ID. 

This makes the videos autoplay and loop.  You can adjust the controls and sound (background), etc too. See below and screenshot attached for reference. 

For an example: I am using it on my SquareKicker website here:  https://squarekicker.com/features

Just swap out the Vimeo / YouTube ID number for yours. 

VIMEO
<iframe src="https://player.vimeo.com/video/625215456?autoplay=1&loop=1&autopause=0&background=1&muted=1&color=ffffff&controls=0&portrait=0" width="800" height= "500"  frameborder="0" allow="autoplay; fullscreen"  allowfullscreen></iframe>

YOUTUBE
<iframe width="100% !important" src="https://www.youtube.com/embed/oyuCciYX2S4?playlist=oyuCciYX2S4&autoplay=1&mute=1&controls=0&loop=1" frameborder="0" allow="accelerometer; " allowfullscreen></iframe>

Note: Youtube needs a playlist to loop the video, just use the same video ID

@SquareKicker This looks cool, thank you for sharing! I tried the code and it definitely worked, however it's not responsive. Probably something I'm breaking on my end haha (like setting the exact width and height - I tried percentage but that didn't work)

On 10/17/2020 at 6:44 AM, SquareKicker said:

@NondysI thought I would share this secret with you.  I'm using Vimeo, and I have used the below iframe inside Squarespace's video block.  But instead of adding the link, you can click <>  and insert this code.  

I am using it on our new SquareKicker website for our learn page here:  https://squarekicker.com/learn

Just swap out the vimeo number for yours.  Also see screenshot.

<iframe src="https://player.vimeo.com/video/466007910?autoplay=1&loop=1&autopause=0&background=1&color=ffffff&controls=0&portrait=0" width="800" height= "500"  frameborder="0" allow="autoplay; fullscreen"  allowfullscreen></iframe>

 

 

 

On 10/17/2020 at 6:44 AM, SquareKicker said:

@NondysI thought I would share this secret with you.  I'm using Vimeo, and I have used the below iframe inside Squarespace's video block.  But instead of adding the link, you can click <>  and insert this code.  

I am using it on our new SquareKicker website for our learn page here:  https://squarekicker.com/learn

Just swap out the vimeo number for yours.  Also see screenshot.

<iframe src="https://player.vimeo.com/video/466007910?autoplay=1&loop=1&autopause=0&background=1&color=ffffff&controls=0&portrait=0" width="800" height= "500"  frameborder="0" allow="autoplay; fullscreen"  allowfullscreen></iframe>

 

 

 

@NickIppolito Hi Nick! Does this work for youtube links as well? Tried it a few different ways and I still get the default youtube widgets over my video with no autoplay and the dang play button! 😫

this is the code: 

<pre class="source-code"><div>&lt;center&gt;&lt;iframe width="264" height="500" src="https://www.youtube.com/embed/HYxsC2XxKwE?controls=0&amp;amp;start=1" title="YouTube video player" frameborder="0" allow="autoplay; fullscreen" allowfullscreen&gt;&lt;/iframe&gt;&lt;/center&gt;</div></pre>

5 hours ago, kelli_carley said:

@NickIppolito Hi Nick! Does this work for youtube links as well? Tried it a few different ways and I still get the default youtube widgets over my video with no autoplay and the dang play button! 😫

 

this is the code: 

<pre class="source-code"><div>&lt;center&gt;&lt;iframe width="264" height="500" src="https://www.youtube.com/embed/HYxsC2XxKwE?controls=0&amp;amp;start=1" title="YouTube video player" frameborder="0" allow="autoplay; fullscreen" allowfullscreen&gt;&lt;/iframe&gt;&lt;/center&gt;</div></pre>

<iframe src="https://youtube.com/embed/afbLQtNsBVQ? playlist=afbLQtNsBVQ&autoplay=1&mute=1 &controls=0&loop=1" width="100%" height="100%" frameborder="0" ></iframe>

On 10/20/2020 at 2:54 PM, SBLTN said:

@SquareKicker This looks cool, thank you for sharing! I tried the code and it definitely worked, however it's not responsive. Probably something I'm breaking on my end haha (like setting the exact width and height - I tried percentage but that didn't work)

 

 

@SBLTN There shouldn't be any responsive issues if you are using it inside a Video Block.  

Here are some other websites that I'm using this method on for example:

Vimeo  Example:
https://www.aquaculture.org.nz/

Youtube Example:
https://scvl.co.nz/

On 4/19/2021 at 5:42 PM, NickIppolito said:

@kelli_carley Youtube has some different api's so you need to use the below.

Swap out afbLQtNsBVQ for you youtube ID.

This iframe code should go into your Video Block Embed Data. See Screenshot in earlier post.  

<iframe src="https://youtube.com/embed/afbLQtNsBVQ? playlist=afbLQtNsBVQ&autoplay=1&mute=1 &controls=0&loop=1" width="100%" height="100%" frameborder="0" ></iframe>

 

@NickIppolito I don't think you know how much I appreciate this, so THANK YOU!!!!!!!!!! It works! 

The only thing that stinks is, the youtube icons still show up right at the beginning of my video 😞

2 hours ago, kelli_carley said:

@NickIppolito I don't think you know how much I appreciate this, so THANK YOU!!!!!!!!!! It works! 

The only thing that stinks is, the youtube icons still show up right at the beginning of my video 😞

@kelli_carley You can’t change this unfortunately. But if you don’t want video controls to show up, you can use a paid Vimeo account as hide controls on their dashboard, but that’s the only way I’m afraid. 

@NickIppolitoEverything will look good for a price! 🙂

On 10/17/2020 at 3:44 AM, NickIppolito said:

@NondysI thought I would share this secret with you.  I'm using Vimeo, and I have used the below iframe inside Squarespace's video block.  But instead of adding the link, you can click <>  and insert this code.  

I am using it on our new SquareKicker website for our learn page here:  https://squarekicker.com/learn

Just swap out the vimeo number for yours.  Also see screenshot.

<iframe src="https://player.vimeo.com/video/466007910?autoplay=1&loop=1&autopause=0&background=1&color=ffffff&controls=0&portrait=0" width="800" height= "500"  frameborder="0" allow="autoplay; fullscreen"  allowfullscreen></iframe>

 

 

 

Hi @NickIppolito I'm running into some issues ☹️

<iframe width="264" height="468" src="https://youtube.com/embed/sw83-jmBkU0?autoplay=1&loop=1&autopause=0&background=1&color=ffffff&controls=0&portrait=0" frameborder="0" allow="autoplay; fullscreen"  allowfullscreen></iframe>

In my attempt:

• How can the chamfer border be removed?
• Why doesn't it loop?

Thanks for the help.

3 hours ago, Dark said:

Hi @NickIppolito I'm running into some issues ☹️

<iframe width="264" height="468" src="https://youtube.com/embed/sw83-jmBkU0?autoplay=1&loop=1&autopause=0&background=1&color=ffffff&controls=0&portrait=0" frameborder="0" allow="autoplay; fullscreen"  allowfullscreen></iframe>

In my attempt:

• How can the chamfer border be removed?
• Why doesn't it loop?

Thanks for the help.

 

Hi @Dark

1.) What do you mean by “chamfer border”? I’m pretty sure you’ll need CSS to remove the border if your seeing one. Flick me a link and I can have a look. 

2.) You seem to be using the Vimeo iframe code I created. YouTube has a different set of api in the URL (see above or pasted below). To loop the video on YouTube you need a “playlist” in the iframe URL parameter. The playlist number is the YouTube ID of the video you want to play again, which will be the same video ID again.
 

See example below. 
 

<iframe src="https://youtube.com/embed/afbLQtNsBVQ? playlist=afbLQtNsBVQ&autoplay=1&mute=1 &controls=0&loop=1" width="100%" height="100%" frameborder="0" ></iframe>

11 hours ago, NickIppolito said:

Hi @Dark

1.) What do you mean by “chamfer border”? I’m pretty sure you’ll need CSS to remove the border if your seeing one. Flick me a link and I can have a look. 

2.) You seem to be using the Vimeo iframe code I created. YouTube has a different set of api in the URL (see above or pasted below). To loop the video on YouTube you need a “playlist” in the iframe URL parameter. The playlist number is the YouTube ID of the video you want to play again, which will be the same video ID again.
 

See example below. 
 

<iframe src="https://youtube.com/embed/afbLQtNsBVQ? playlist=afbLQtNsBVQ&autoplay=1&mute=1 &controls=0&loop=1" width="100%" height="100%" frameborder="0" ></iframe>

@NickIppolito I just meant the video border. Here's the requested link. 

I replaced the Youtube video with a Vimeo one (seems like the border is gone after switching). I'm planning on getting a paid Vimeo account so that the controls can be hidden.

Autoplay doesn't work though. How can this be fixed?

Thanks 🙂

I have experienced a border issue too when using the code you have provided for vimeo links Nick. See below.

Which is frustrating as it's otherwise perfect!

2 hours ago, MarketingFounderMade said:

I have experienced a border issue too when using the code you have provided for vimeo links Nick. See below.

Which is frustrating as it's otherwise perfect!

Can you share or send me a link? 

Hi everyone.  I'm stumped!  The below code I'm using autoplays in the Squarespace page design mode, but doesn't work in reality, not on Chrome, nor Safari. 

<pre class="source-code"><div>&lt;iframe width="560" height="315" src="https://www.youtube.com/embed/pZhhc9wNCsE?autoplay=1&amp;loop=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;</div></pre>

What am I doing wrong?  Please help me if you can!  Thanks for any tips you might have!  🙂

9 hours ago, Coolopeips said:

Hi everyone.  I'm stumped!  The below code I'm using autoplays in the Squarespace page design mode, but doesn't work in reality, not on Chrome, nor Safari. 

<pre class="source-code"><div>&lt;iframe width="560" height="315" src="https://www.youtube.com/embed/pZhhc9wNCsE?autoplay=1&amp;loop=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;</div></pre>

What am I doing wrong?  Please help me if you can!  Thanks for any tips you might have!  🙂

 

The embed code should be

<iframe width="560" height="315" src="https://www.youtube.com/embed/pZhhc9wNCsE?autoplay=1&amp;loop=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

Hi @bangank36!  Thanks a ton for helping me.  

I copied/pasted your code and it still didn't work.  Once I saved it, Squarespace changed the code to the below automatically: 

And I checked our website - https://www.cocolearnsspanish.com and the video isn't autoplaying.  Any ideas?  So strange.  Should I upload it in Vimeo?  Would that address the issue?

Also, how does website like https://scvl.co.nz/ make the autoplay work?  Thanks a ton! 🙂. Happy Holidays!

35 minutes ago, Coolopeips said:

Hi @bangank36!  Thanks a ton for helping me.  

I copied/pasted your code and it still didn't work.  Once I saved it, Squarespace changed the code to the below automatically: 

And I checked our website - https://www.cocolearnsspanish.com and the video isn't autoplaying.  Any ideas?  So strange.  Should I upload it in Vimeo?  Would that address the issue?

Also, how does website like https://scvl.co.nz/ make the autoplay work?  Thanks a ton! 🙂. Happy Holidays!

 

This is how I used embed block

Hi @bangank36 - appreciate your help.  I tried everything you mentioned, but still doesn't work. 😞. Here's a video of what I'm seeing:

https://careerconnections.wetransfer.com/downloads/df19746b8762b8713d5b02d8a2869f6920211226144811/5b7182e574117ff0540c2c5ec358e74320211226144811/051669
Sorry, it's a little bigger than what's allowed to attach here, so I used a Wetransfer, hope that's okay.  

It seems like Squarespace automatically changes the code after saving.  Any other tips?  Thanks again!  I appreciate it!  🙂

Hi! I'm just seeing this - I found this code worked - add video module and click on the embed <> option).

You'll need to:

- Put your Vimeo video on Privacy setting "Hide from Vimeo" (unless it can be public, in which case "Public" works too)
- Switch out your URL for the video
- Change the width/height as needed

<iframe src="https://player.vimeo.com/video/685110903?background=1" width="900" height="383" frameborder="0" allow="autoplay; fullscreen" allowfullscreen&amp;gt;&amp;lt;/iframe>

This should set your video on autoplay and loop with no controls showing.

With sunshine ☀️

Hi all- 

Thanks so much for the Vimeo embed code shown above! It's working to an extent, but I can't seen to change the height or width without it breaking the code. I'm using vertical videos (I know, not the norm), and I imagine this is meant for more classic orientation. I'm including the code I'm using, as well as a link to the test site I have up. Ideally, I'd like the videos to be able to nudge right next to each other (similar to how the photos do on my stills page. Any help would be greatly appreciated!!

Cheers, Drew

Code I'm currently using:

<iframe src="https://player.vimeo.com/video/625215456?autoplay=1&loop=1&autopause=0&background=1&muted=1&color=ffffff&controls=0&portrait=0" width="800" height= "500"  frameborder="0" allow="autoplay; fullscreen"  allowfullscreen></iframe>

My site:

https://silver-vibraphone-x79s.squarespace.com

On 3/16/2022 at 9:06 PM, dgurian said:

Hi all- 

Thanks so much for the Vimeo embed code shown above! It's working to an extent, but I can't seen to change the height or width without it breaking the code. I'm using vertical videos (I know, not the norm), and I imagine this is meant for more classic orientation. I'm including the code I'm using, as well as a link to the test site I have up. Ideally, I'd like the videos to be able to nudge right next to each other (similar to how the photos do on my stills page. Any help would be greatly appreciated!!

Cheers, Drew

 

Code I'm currently using:

<iframe src="https://player.vimeo.com/video/625215456?autoplay=1&loop=1&autopause=0&background=1&muted=1&color=ffffff&controls=0&portrait=0" width="800" height= "500"  frameborder="0" allow="autoplay; fullscreen"  allowfullscreen></iframe>

 

My site:

https://silver-vibraphone-x79s.squarespace.com

try using 800px & 500px instead of 800 & 500