Nondys Posted June 19, 2020 Share Posted June 19, 2020 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
Beyondspace Posted June 19, 2020 Share Posted June 19, 2020 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, Lightbox Studio pluginIf 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
JustinWyne Posted October 8, 2020 Share Posted October 8, 2020 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. studio_dazee 1 Link to comment
Nondys Posted October 9, 2020 Author Share Posted October 9, 2020 Hi @JustinWyne... Unfortunately not 😞 I wish I did but I haven't found anything yet. Link to comment
Nick_SquareKicker Posted October 17, 2020 Share Posted October 17, 2020 (edited) (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 Edited April 12, 2022 by NickIppolito Updated with Vimeo and Youtube References EnricGodes, Nondys and kelli_carley 2 1 Hi, 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
SBLTN Posted October 20, 2020 Share Posted October 20, 2020 @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> Link to comment
kelli_carley Posted April 19, 2021 Share Posted April 19, 2021 (edited) @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><center><iframe width="264" height="500" src="https://www.youtube.com/embed/HYxsC2XxKwE?controls=0&amp;start=1" title="YouTube video player" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></center></div></pre> Edited April 19, 2021 by kelli_carley Link to comment
Nick_SquareKicker Posted April 19, 2021 Share Posted April 19, 2021 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><center><iframe width="264" height="500" src="https://www.youtube.com/embed/HYxsC2XxKwE?controls=0&amp;start=1" title="YouTube video player" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></center></div></pre> @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> kelli_carley 1 Hi, 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
Nick_SquareKicker Posted April 19, 2021 Share Posted April 19, 2021 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/ Hi, 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
kelli_carley Posted May 9, 2021 Share Posted May 9, 2021 (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 May 9, 2021 by kelli_carley Link to comment
Nick_SquareKicker Posted May 9, 2021 Share Posted May 9, 2021 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. Hi, 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
kelli_carley Posted May 26, 2021 Share Posted May 26, 2021 @NickIppolitoEverything will look good for a price! 🙂 Link to comment
Dark Posted July 19, 2021 Share Posted July 19, 2021 (edited) 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. Edited July 19, 2021 by Dark Link to comment
Nick_SquareKicker Posted July 19, 2021 Share Posted July 19, 2021 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> Hi, 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
Dark Posted July 19, 2021 Share Posted July 19, 2021 (edited) 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 July 19, 2021 by Dark Link to comment
MarketingFounderMade Posted October 18, 2021 Share Posted October 18, 2021 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! Link to comment
Nick_SquareKicker Posted October 18, 2021 Share Posted October 18, 2021 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, 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
Coolopeips Posted December 24, 2021 Share Posted December 24, 2021 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><iframe width="560" height="315" src="https://www.youtube.com/embed/pZhhc9wNCsE?autoplay=1&loop=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></pre> What am I doing wrong? Please help me if you can! Thanks for any tips you might have! 🙂 Beyondspace 1 Link to comment
Beyondspace Posted December 25, 2021 Share Posted December 25, 2021 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><iframe width="560" height="315" src="https://www.youtube.com/embed/pZhhc9wNCsE?autoplay=1&loop=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></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&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, Lightbox Studio pluginIf 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
Coolopeips Posted December 25, 2021 Share Posted December 25, 2021 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! Beyondspace 1 Link to comment
Beyondspace Posted December 25, 2021 Share Posted December 25, 2021 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 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, Lightbox Studio pluginIf 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
Coolopeips Posted December 26, 2021 Share Posted December 26, 2021 (edited) 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 December 26, 2021 by Coolopeips Link to comment
StoriesAroundTheSun Posted March 6, 2022 Share Posted March 6, 2022 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&gt;&lt;/iframe> This should set your video on autoplay and loop with no controls showing. With sunshine ☀️ tuanphan 1 Link to comment
dgurian Posted March 16, 2022 Share Posted March 16, 2022 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
tuanphan Posted March 18, 2022 Share Posted March 18, 2022 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment