Autoplay Multiple Videos Simultaneously

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!

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

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: