Jump to content

How to embed borderless, autoplaying, looping videos on Squarespace

Recommended Posts

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!

 

Link to comment

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

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 3 months later...

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.

Link to comment

(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

1465171763_AutoplayVideoonSQSP.thumb.png.7862dd46de2130be5a6fb61be841d8b9.png

 

Edited by NickIppolito
Updated with Vimeo and Youtube References

SquareKickerHi, I'm Nick, CEO & Co-Founder at squarekicker.com.  Take your Squarespace sites to the next level with SquareKicker's No-Code Design & Animation Extension. Break free from templates & complex code and start building unique websites that you are proud to show your clients without ever having to write a single line of code. 

Tutorials  ●  News  ●  Inspiration  ●  Features  ●  FAQS

 

Link to comment

@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>

 

 

 

Autoplay Video Block.png

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>

 

 

 

Autoplay Video Block.png

 

Link to comment
  • 5 months later...

@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>

Screen Shot 2021-04-19 at 12.17.46 PM.png

Screen Shot 2021-04-19 at 12.20.19 PM.png

Edited by kelli_carley
Link to comment
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>

Screen Shot 2021-04-19 at 12.17.46 PM.png

Screen Shot 2021-04-19 at 12.20.19 PM.png

@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>

 

SquareKickerHi, I'm Nick, CEO & Co-Founder at squarekicker.com.  Take your Squarespace sites to the next level with SquareKicker's No-Code Design & Animation Extension. Break free from templates & complex code and start building unique websites that you are proud to show your clients without ever having to write a single line of code. 

Tutorials  ●  News  ●  Inspiration  ●  Features  ●  FAQS

 

Link to comment
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/

SquareKickerHi, I'm Nick, CEO & Co-Founder at squarekicker.com.  Take your Squarespace sites to the next level with SquareKicker's No-Code Design & Animation Extension. Break free from templates & complex code and start building unique websites that you are proud to show your clients without ever having to write a single line of code. 

Tutorials  ●  News  ●  Inspiration  ●  Features  ●  FAQS

 

Link to comment
  • 3 weeks later...
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 😞

Edited by kelli_carley
Link to comment
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. 

SquareKickerHi, I'm Nick, CEO & Co-Founder at squarekicker.com.  Take your Squarespace sites to the next level with SquareKicker's No-Code Design & Animation Extension. Break free from templates & complex code and start building unique websites that you are proud to show your clients without ever having to write a single line of code. 

Tutorials  ●  News  ●  Inspiration  ●  Features  ●  FAQS

 

Link to comment
  • 3 weeks later...
  • 1 month later...
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>

 

 

 

Autoplay Video Block.png

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.

 

Screen Shot 2021-07-18 at 10.17.59 PM.png

Edited by Dark
Link to comment
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.

 

Screen Shot 2021-07-18 at 10.17.59 PM.png

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>

SquareKickerHi, I'm Nick, CEO & Co-Founder at squarekicker.com.  Take your Squarespace sites to the next level with SquareKicker's No-Code Design & Animation Extension. Break free from templates & complex code and start building unique websites that you are proud to show your clients without ever having to write a single line of code. 

Tutorials  ●  News  ●  Inspiration  ●  Features  ●  FAQS

 

Link to comment
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 🙂

Edited by Dark
Link to comment
  • 2 months later...
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.

1772785425_Screenshot2021-10-18at14_33_41.png.e69030ac1735685c6e5eaa115f6ca524.pngWhich is frustrating as it's otherwise perfect!

Can you share or send me a link? 

SquareKickerHi, I'm Nick, CEO & Co-Founder at squarekicker.com.  Take your Squarespace sites to the next level with SquareKicker's No-Code Design & Animation Extension. Break free from templates & complex code and start building unique websites that you are proud to show your clients without ever having to write a single line of code. 

Tutorials  ●  News  ●  Inspiration  ●  Features  ●  FAQS

 

Link to comment
  • 2 months later...

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!  🙂

 

Link to comment
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>

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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: 

image.png.f587a34e76ffeb2b647c3727900c8f9c.pngAnd 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!

 

Link to comment
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: 

image.png.f587a34e76ffeb2b647c3727900c8f9c.pngAnd 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

image.thumb.png.7354f3db43009bb8e9967380fa92aeee.png

image.png.1364c2e22a7e32b4cd3d52f65ee41843.png

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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!  🙂

Edited by Coolopeips
Link to comment
  • 2 months later...

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 ☀️

Link to comment
  • 2 weeks later...

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

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.