Nick_SquareKicker Posted April 12, 2022 Share Posted April 12, 2022 (edited) 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; } } Edited April 12, 2022 by NickIppolito Paulll, KitCasey and klmastre 3 Hi, I'm Nick a 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. Pro Extension ● Squarespace Template Store ● Inspiration ● Tutorials ● Resources Link to comment
Sacred_Mission Posted April 24, 2022 Share Posted April 24, 2022 @NickIppolito Thank so much for this code! One thing I cannot figure out though... How can I have the controls available on the Vimeo video? I would like for the ability to have people control the playback and audio and even click through to the actual video on Vimeo. Any help on this would be so appreciated! LINK: https://www.sacredmission.life/home-test Thanks again! Link to comment
Nick_SquareKicker Posted April 24, 2022 Share Posted April 24, 2022 2 hours ago, Sacred_Mission said: @NickIppolito Thank so much for this code! One thing I cannot figure out though... How can I have the controls available on the Vimeo video? I would like for the ability to have people control the playback and audio and even click through to the actual video on Vimeo. Any help on this would be so appreciated! LINK: https://www.sacredmission.life/home-test Thanks again! <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> The code above has control hidden with “controls=0”. Remove this or change to “controls=1” Same thing for muted as well if you want audio. muted=0 or muted=1 A full list of Vimeo video parameters can be found here. https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Player-parameters-overview Hi, I'm Nick a 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. Pro Extension ● Squarespace Template Store ● Inspiration ● Tutorials ● Resources Link to comment
BelFox Posted April 28, 2022 Share Posted April 28, 2022 On 4/12/2022 at 10:30 PM, NickIppolito said: 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; } } Hi Nick! The embed code seems to have worked to get it playing and looping but I can't seem to get the CSS to work to make the size bigger! I want it to stretch across the whole page as a nice landing home page with video playing on a loop. I've attached a screenshot to show you what I've done. I just copied and pasted the CSS you posted but didn't customise it, is this where I went wrong? Thank you!! KitCasey 1 Link to comment
Nick_SquareKicker Posted April 28, 2022 Share Posted April 28, 2022 2 minutes ago, BelFox said: Hi Nick! The embed code seems to have worked to get it playing and looping but I can't seem to get the CSS to work to make the size bigger! I want it to stretch across the whole page as a nice landing home page with video playing on a loop. I've attached a screenshot to show you what I've done. I just copied and pasted the CSS you posted but didn't customise it, is this where I went wrong? Thank you!! Without seeing your site, it looks like you have a syntax error at line 67. The Custom CSS on the screen is right, so it's probably a bit of broken code above this code in the first 64 lines, or you perhaps your pasted this in the middle of some other CSS code ... or pasted over something and removed a closing bracket? Maybe you can paste all your custom CSS here so I can see what bit of your code is broken, of feel free to invite me as a admin contributor and I can have a look for you. support@squarekicker.com Hi, I'm Nick a 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. Pro Extension ● Squarespace Template Store ● Inspiration ● Tutorials ● Resources Link to comment
KitCasey Posted April 29, 2022 Share Posted April 29, 2022 (edited) On 4/12/2022 at 5:30 PM, NickIppolito said: 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; } } @NickIppolito - THANK YOU for this! However on mobile it's still coming up really tiny. (though it's auto-playing (yay!) How do I make it 16:9 full screen on mobile and still autoplay? I added you as a contributor so you can let me know. Thank you! @NickIppolito Edited April 29, 2022 by KitCasey Link to comment
BelFox Posted April 29, 2022 Share Posted April 29, 2022 22 hours ago, NickIppolito said: Without seeing your site, it looks like you have a syntax error at line 67. The Custom CSS on the screen is right, so it's probably a bit of broken code above this code in the first 64 lines, or you perhaps your pasted this in the middle of some other CSS code ... or pasted over something and removed a closing bracket? Maybe you can paste all your custom CSS here so I can see what bit of your code is broken, of feel free to invite me as a admin contributor and I can have a look for you. support@squarekicker.com Hi Nick, I've added you as an admin contributor to have a quick look if thats okay! I've been trying for a while now to just get an autoplaying, looped video now and it seems so impossible to do haha! I really appreciate the help, Isobel Link to comment
Nick_SquareKicker Posted April 30, 2022 Share Posted April 30, 2022 14 hours ago, BelFox said: Hi Nick, I've added you as an admin contributor to have a quick look if thats okay! I've been trying for a while now to just get an autoplaying, looped video now and it seems so impossible to do haha! I really appreciate the help, Isobel All fixed. You just had an extra / in your custom code about this CSS. Have fun 🙂 Hi, I'm Nick a 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. Pro Extension ● Squarespace Template Store ● Inspiration ● Tutorials ● Resources Link to comment
Nick_SquareKicker Posted April 30, 2022 Share Posted April 30, 2022 14 hours ago, KitCasey said: @NickIppolito - THANK YOU for this! However on mobile it's still coming up really tiny. (though it's auto-playing (yay!) How do I make it 16:9 full screen on mobile and still autoplay? I added you as a contributor so you can let me know. Thank you! @NickIppolito Are you still having an issue with this? It seems to be working on Mobile and Desktop. I see you have hidden the auto play video on mobile, but this looks intentional, but works fine. Feel free to DM me if you still having issues. Hi, I'm Nick a 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. Pro Extension ● Squarespace Template Store ● Inspiration ● Tutorials ● Resources Link to comment
BelFox Posted April 30, 2022 Share Posted April 30, 2022 7 hours ago, NickIppolito said: All fixed. You just had an extra / in your custom code about this CSS. Have fun 🙂 Wow, thank you so so much! I really appreciate it!! Isobel Link to comment
JoelleM Posted May 10, 2022 Share Posted May 10, 2022 (edited) Hi Nick @NickIppolito Ah I'm so glad you posted this! Good fix to the Squarespace update as I really like to include a ?rel=0 and get rid of spammy related videos. I'm not sure if I did something wrong as it won't autoplay or loop (and I have sound whether I set to mute or not), but the size seems to be working ok. (Top is video block, underneath is the embed block) www.meltham-moor.squarespace.com/welcome PW - More123 I've used this code <iframe src="https://www.youtube.com/embed/6LVyy7LeC5Y?rel=0&?&autoplay=1&mute=1&controls=1&loop=1" frameborder="0" allow="accelerometer; " allowfullscreen></iframe> Edited May 10, 2022 by JoelleM Link to comment
Nick_SquareKicker Posted May 10, 2022 Share Posted May 10, 2022 4 hours ago, JoelleM said: Hi Nick @NickIppolito Ah I'm so glad you posted this! Good fix to the Squarespace update as I really like to include a ?rel=0 and get rid of spammy related videos. I'm not sure if I did something wrong as it won't autoplay or loop (and I have sound whether I set to mute or not), but the size seems to be working ok. (Top is video block, underneath is the embed block) www.meltham-moor.squarespace.com/welcome PW - More123 I've used this code <iframe src="https://www.youtube.com/embed/6LVyy7LeC5Y?rel=0&?&autoplay=1&mute=1&controls=1&loop=1" frameborder="0" allow="accelerometer; " allowfullscreen></iframe> Hi @JoelleM, Youtube and Vimeo have deference parameters and need different code which is why highlight the code for both. Youtube auto playing videos need a “playlist” and in the playlist you have put the same ID as your video. See the example of a YouTube embedded code with a playlist. Notice the playlist ID. You will want to add the below changes to your code. <iframe src="https://www.youtube.com/embed/6LVyy7LeC5Y?rel=0&playlist=6LVyy7LeC5Y&autoplay=1&mute=1&controls=1&loop=1" frameborder="0" allow="accelerometer; " allowfullscreen></iframe> Hi, I'm Nick a 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. Pro Extension ● Squarespace Template Store ● Inspiration ● Tutorials ● Resources Link to comment
JoelleM Posted May 11, 2022 Share Posted May 11, 2022 17 hours ago, NickIppolito said: Hi @JoelleM, Youtube and Vimeo have deference parameters and need different code which is why highlight the code for both. Youtube auto playing videos need a “playlist” and in the playlist you have put the same ID as your video. See the example of a YouTube embedded code with a playlist. Notice the playlist ID. You will want to add the below changes to your code. <iframe src="https://www.youtube.com/embed/6LVyy7LeC5Y?rel=0&playlist=6LVyy7LeC5Y&autoplay=1&mute=1&controls=1&loop=1" frameborder="0" allow="accelerometer; " allowfullscreen></iframe> Ah thanks very much. I've got it working on a 7.0 Bedford site (tested at www.rvhs.co.uk/new-page-2) but it's still not autoplaying on the 7.1 site for some reason. Link to comment
Nick_SquareKicker Posted May 11, 2022 Share Posted May 11, 2022 (edited) 10 minutes ago, JoelleM said: Ah thanks very much. I've got it working on a 7.0 Bedford site (tested at www.rvhs.co.uk/new-page-2) but it's still not autoplaying on the 7.1 site for some reason. Just sent you a message. I'll give you a hand. Edited May 11, 2022 by NickIppolito JoelleM 1 Hi, I'm Nick a 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. Pro Extension ● Squarespace Template Store ● Inspiration ● Tutorials ● Resources Link to comment
Paulll Posted June 23, 2022 Share Posted June 23, 2022 (edited) Thanks so much for this solution @Nicklppolito It works brilliantly, I've been in contact with Squarespace and Vimeo all day to find a way to get this working! I had them embedded using the standard autoplay embed, added recommended parameters, but only some would autoplay at random every refresh. Or sometimes, not at all. This method sorted it. I notice on Mobile the player's Profile, title and share icons are always visible. Controls seem to hover in/out. Any ideas if we can remove those? No worries if not, just happy to have it consistently autoplaying at this stage! Edited June 23, 2022 by Paulll Link to comment
Nick_SquareKicker Posted June 23, 2022 Share Posted June 23, 2022 (edited) 33 minutes ago, Paulll said: Thanks so much for this solution @NickIppolito It works brilliantly, I've been in contact with Squarespace and Vimeo all day to find a way to get this working! I had them embedded using the standard autoplay embed, added recommended parameters, but only some would autoplay at random every refresh. Or sometimes, not at all. This method sorted it. I notice on Mobile the player's Profile, title and share icons are always visible. Controls seem to hover in/out. Any ideas if we can remove those? No worries if not, just happy to have it consistently autoplaying at this stage! @PaulllGlad to hear. Will be look forward to adding this as a SquareKicker Tool in the future. 😉 Try changing control=1 to controls=0 Edited June 23, 2022 by NickIppolito Hi, I'm Nick a 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. Pro Extension ● Squarespace Template Store ● Inspiration ● Tutorials ● Resources Link to comment
Paulll Posted June 23, 2022 Share Posted June 23, 2022 3 hours ago, NickIppolito said: @PaulllGlad to hear. Will be look forward to adding this as a SquareKicker Tool in the future. 😉 Try changing control=1 to controls=0 Hm, the controls value was already at 0 from the code I copied from your original 🤔 Not a huge issue though, I see non-SS sites utilising Vimeo embeds with the same issue on mobile. The main thing was autoplaying being consistent/actually working on desktop at least - thanks again! SquareKicker looks good btw! Will check it out some more soon Link to comment
Martian Posted June 27, 2022 Share Posted June 27, 2022 OHMY GOD!!! thank you!!!!!! I was wrestling with this for 2 days!!!!!! NO HELP FROM SQUARESPACE SUPPORT!! Nick_SquareKicker 1 Link to comment
Christe Posted August 17, 2022 Share Posted August 17, 2022 On 10/18/2021 at 9:34 AM, 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! I am also having this odd border/embossed effect when I try and embed an autoplaying vimeo link. The code I'm using is what @Nick_SquareKicker suggested: <iframe src="https://player.vimeo.com/video/718931958?autoplay=1&loop=1&autopause=0&background=1&muted=1&color=ffffff&controls=0&portrait=0&frameborder=0” allow="autoplay; fullscreen" allowfullscreen/iframe> Followed up the custom css: // 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; } } I can't tell where this border is coming from! This site is here: https://thisispidgintestsite.squarespace.com/config/settings/site-visibility Any help would be super appreciated! Link to comment
tuanphan Posted August 21, 2022 Share Posted August 21, 2022 On 8/18/2022 at 1:17 AM, Christe said: I am also having this odd border/embossed effect when I try and embed an autoplaying vimeo link. The code I'm using is what @Nick_SquareKicker suggested: <iframe src="https://player.vimeo.com/video/718931958?autoplay=1&loop=1&autopause=0&background=1&muted=1&color=ffffff&controls=0&portrait=0&frameborder=0” allow="autoplay; fullscreen" allowfullscreen/iframe> Followed up the custom css: // 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; } } I can't tell where this border is coming from! This site is here: https://thisispidgintestsite.squarespace.com/config/settings/site-visibility Any help would be super appreciated! Try adding this to Design > Custom CSS iframe { border: 1px solid transparent; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Christe Posted August 23, 2022 Share Posted August 23, 2022 On 8/20/2022 at 8:41 PM, tuanphan said: Try adding this to Design > Custom CSS iframe { border: 1px solid transparent; } Genius! That worked! Thanks so much @tuanphan Link to comment
seantattam Posted September 9, 2022 Share Posted September 9, 2022 Hey @Nick_SquareKicker, hope you can help with this! I've managed to get the video embedded and looping, however the youtube UI is still appearing on hover and it's also got large black areas at the top and bottom. You can view the page here Thanks in advance! Link to comment
pexeldio Posted January 12, 2023 Share Posted January 12, 2023 On 6/19/2020 at 10:12 AM, Beyondspace said: 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 From where you get that plugin, can you share the link please? Link to comment
NICKY-G Posted May 14, 2023 Share Posted May 14, 2023 On 10/9/2020 at 11:51 PM, Nondys said: Hi @JustinWyne... Unfortunately not 😞 I wish I did but I haven't found anything yet. autoplay=1&loop=1&autopause=0&backgroundapi=1&background=1&mute=0&loop=0&title=0&byline=0&portrait=0h=196e67e7e8&autoplay=1&loop=1&title=0&byline=0&portrait=0" Link to comment
NICKY-G Posted May 14, 2023 Share Posted May 14, 2023 After a lot of pain and heartache this works for me - I add at the end of the top vimeo code: Vimeo code: <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/826406003? Then add this at the end of the above code: autoplay=1&loop=1&autopause=0&backgroundapi=1&background=1&mute=0&loop=0&title=0&byline=0&portrait=0h=196e67e7e8&autoplay=1&loop=1&title=0&byline=0&portrait=0" Then leave the rest of the code. I also clicked in the auto play and loop on vimeo settings but not sure if required... 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