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

14 answers to this question

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, Portfolio hover Replace Link Style
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

@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

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
Posted (edited)
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

Create an account or sign in to comment

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

×
×
  • Create New...