Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

How to embed borderless, autoplaying, looping videos on Squarespace


Nondys

Question

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

Recommended Posts

  • 0

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 BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0

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
  • 0

(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 Ippolito, founder at squarekicker.com SquareKicker is a No-Code Design & Animation Extension for Squarespace. Say goodbye to copy & paste plugins and unlock your creativity and explore a whole new level of the unlimited design possibilities without ever having to write a single line of code.

Link to comment
  • 0

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

@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
  • 0
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 Ippolito, founder at squarekicker.com SquareKicker is a No-Code Design & Animation Extension for Squarespace. Say goodbye to copy & paste plugins and unlock your creativity and explore a whole new level of the unlimited design possibilities without ever having to write a single line of code.

Link to comment
  • 0
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 Ippolito, founder at squarekicker.com SquareKicker is a No-Code Design & Animation Extension for Squarespace. Say goodbye to copy & paste plugins and unlock your creativity and explore a whole new level of the unlimited design possibilities without ever having to write a single line of code.

Link to comment
  • 0
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
  • 0
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 Ippolito, founder at squarekicker.com SquareKicker is a No-Code Design & Animation Extension for Squarespace. Say goodbye to copy & paste plugins and unlock your creativity and explore a whole new level of the unlimited design possibilities without ever having to write a single line of code.

Link to comment
  • 0
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
  • 0
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 Ippolito, founder at squarekicker.com SquareKicker is a No-Code Design & Animation Extension for Squarespace. Say goodbye to copy & paste plugins and unlock your creativity and explore a whole new level of the unlimited design possibilities without ever having to write a single line of code.

Link to comment
  • 0
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
  • 0
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 Ippolito, founder at squarekicker.com SquareKicker is a No-Code Design & Animation Extension for Squarespace. Say goodbye to copy & paste plugins and unlock your creativity and explore a whole new level of the unlimited design possibilities without ever having to write a single line of code.

Link to comment
  • 0

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
  • 0
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 BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0

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
  • 0
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 BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0

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
  • 0

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
  • 0

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
  • 0
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
  • 0

SQUARESPACE HAS REMOVED THE EMBED "<>" FEATURE FOR ADDING IFRAME IN VIDEO BLOCKS.  THIS MEANS THAT YOU NEED TO USE A EMBDED BLOCK INSTEAD. HOWEVER, YOU ALSO NEED THE BELOW CSS ADDED TO YOUR CUSTOM CSS AREA TO MAKE THE IFRAME FILL THE EMBED BLOCKS.

The below screenshot is a youtube iframe embed code in an embed block. The embed block on the left is a iframe without CSS , the embed block on the right is an iframe with the necessary css. 

Embed Block Iframe Code: Youtube Example:

<iframe src="https://www.youtube.com/embed/_OuUbl_WKZU?playlist=_OuUbl_WKZU&autoplay=1&mute=1&controls=0&loop=1" frameborder="0" allow="accelerometer; " allowfullscreen></iframe>

Embed Block Iframe Code: Vimeo Example:

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

CUSTOM CSS NEEDED (Custom CSS Area)

// Embed Block for Video
#siteWrapper .embed-block {
  aspect-ratio:  16/9 ;
  margin: 17px;
  padding: 0px !important; 
  
  iframe {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  
  &:first-child,
  &:last-child {
      padding: 0px !important; 
  }
}

 

1470860002_EMBEDBLOCKBEFOREANDAFTER.thumb.png.e16690894406a586a74472c64452ce7f.png

Edited by NickIppolito

SquareKickerHi, I'm Nick Ippolito, founder at squarekicker.com SquareKicker is a No-Code Design & Animation Extension for Squarespace. Say goodbye to copy & paste plugins and unlock your creativity and explore a whole new level of the unlimited design possibilities without ever having to write a single line of code.

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