Jump to content

Code Block: How can I autoplay a video?

Go to solution Solved by foleyatwork,

Recommended Posts

Hi Nick @NickIppolito, thanks for responding. I must not have notifications set to this forum. I didn't know you responded. It was a video block, and after getting furious at Vimeo, I realized I had put something in the CSS eons ago overriding the embed and hence keeping the video looping despite the embed code showing otherwise. Huge user error!  : ) All solved now. Thank you!

 

Edited by jenartsquare
Link to comment
  • 1 month later...

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

696437952_EMBEDBLOCKBEFOREANDAFTER.thumb.png.3d202940de42174507b6151258746da8.png

I have specified this code with this new method here in this post:

 

Edited by NickIppolito

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

Squarespace Extension  ●  Templates  ●  News  ●  Inspiration  ●  Tutorials  ●  Resources

 

Link to comment
On 10/17/2020 at 12:18 PM, NickIppolito said:

Hi know this is an old post, but I thought I'd chime in.  I've manage to do this, and it pretty easy really.  

I'm using Vimeo, and I have used the below iframe inside Squarespace's video block, not a code 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.  See screenshot below for example.

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

It also will auto play on mobile.  You can adjust the settings for controls back to 1 instead 0.  And muted is background=1, so if you want sound change that, switch it to 0.  

 

Autoplay Video Block.png

Hi, I am trying to make my vimeo video autoplay, but so far no joy! I have tried manually adding the code but it doesn't work. Also, I don't seem to have the same options as you - can anyone tell me why? See attachment. my squarespace template is 7.1 - does this make a difference? Thanks in advance...

Screenshot 2022-04-18 at 11.36.21.png

Link to comment
24 minutes ago, Corbett said:

Hi, I am trying to make my vimeo video autoplay, but so far no joy! I have tried manually adding the code but it doesn't work. Also, I don't seem to have the same options as you - can anyone tell me why? See attachment. my squarespace template is 7.1 - does this make a difference? Thanks in advance...

Screenshot 2022-04-18 at 11.36.21.png

Just guessing, but the Vimeo URL looks like it has an extra set of numbers which usually means that the embed settings need permission???

See below example:

image.thumb.png.059634d04d8cb9bf688cbae146d5425a.png

 

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

Squarespace Extension  ●  Templates  ●  News  ●  Inspiration  ●  Tutorials  ●  Resources

 

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.