Jump to content

Autoplay Multiple Videos Simultaneously

Recommended Posts

Site URL: https://jackshugruedesign.com/work/hoops

Wesbite: Jackshugruedesign.com

Password: JCSdesign

Hey y'all! I'm currently having some trouble with autoplaying multiple videos simultaneously - only one will play at a single time! This issue is on my HOOPS project page, when you scroll all the way down to the bottom and come to the three iPhone mockup videos next to one another - I've added a screenshot for reference below. 

All of the videos are mine and embedded on the page (uploaded on Vimeo). I would really love to be able to get these videos to autoplay simultaneously and loop. 

Also if anyone knows why these black corners are showing up (at the bottom of each of the videos right below the iPhone mock ups and how I could get rid of them that would be great too)

Thanks!

Screen Shot 2021-02-27 at 9.24.50 PM.png

Edited by Jcshugrue
spelling & grammar
Link to comment
  • 7 months later...
  • Replies 2
  • Views 2.3k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hi @Jcshugrue, not sure if its still helpful, but here is an example of what I have done. 

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

1465171763_AutoplayVideoonSQSP.thumb.png.7862dd46de2130be5a6fb61be841d8b9.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
  • 5 months later...

Just an update on the above method.  Squarespace has removed the <> feature on video blocks to add iframe's the url to make video blocks autoplay.  So you need to use an embed block, but you also need some extra CSS to make the video iframe fill the block nicely. 

Method and code added at below post:

 

 

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.