How to embed borderless, autoplaying, looping videos on Squarespace

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

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

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

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 

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

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 

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 🙂 

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. 

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

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>

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>

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. 

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.

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!

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

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

OHMY GOD!!! thank you!!!!!! I was wrestling with this for 2 days!!!!!! NO HELP FROM SQUARESPACE SUPPORT!!

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!

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

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

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!

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?

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" 

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