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

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 post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

5 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, Advanced Product Delivery Date Time PickerGeolocation Automatic Currency Converter, Sortable Table from GSheet
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 post
  • 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 post
  • 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

Nick Ippolito
Founder at SquareKicker

With SquareKicker say goodbye to copy & paste Squarespace plugins. Customize your Squarespace website with this full control design and animation extension. SquareKicker is a no-code solution for custom design on Squarespace websites. Unleash your creativity and design the way you always wanted. 

Until now, Squarespace websites have typically been made with either their pre-made templates or complex code. SquareKicker takes the simplicity and elegance of creating beautiful websites on Squarespace while seamlessly integrating the power for designers to build customizations without needing to write a single line of code and at a fraction of the time it takes to code.  You become the designer and the developer. There has never been a design tool that allows so much flexibility!

Get started for free at SquareKicker.com

Link to post
  • 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 post

Create an account or sign in to comment

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


×
×
  • Create New...