Playsinline Video on Mobile and 7.1

Site URL: https://cat-wedge-xh9c.squarespace.com/about

I have not been able to get a clear answer on getting my background/banner video to autoplay on mobile. I've got a background video coming from YouTube, which I know has been having problems, so lower on the page I added a background video from Vimeo (I have Vimeo Plus) to test out.

I know that video needs the playsinline attribute to autoplay on mobile, but where? How do I add this? adding "?autoplay=1" does nothing.

Or is it actually just impossible to get background videos to autoplay on mobile on Squarespace 7.1? Do I need some third party product? I saw one site that said I needed to download Handbrake to make video autoplay on mobile? 

Any explanations would be so appreciated! 

Have you found the solution yet?

I was just told that it was impossible. And that even if it were possible, I wouldn't want to do it since it would slow my site down so much. 🤷‍♀️

Hi @Smartyart,

Definitely not impossible!

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

On 10/17/2020 at 6:55 AM, NickIppolito said:

Hi @Smartyart,

Definitely not impossible!  We have made some far crazier things in Squarespace with SquareKicker.  However,  I thought I would share this secret with you.  It's actually pretty easy. 

First, I'm using Vimeo, and I have used the below iframe inside Squarespace's video block.  But instead of adding the link, you can click <>  and insert this code in a video block.  

I am using it on our new SquareKicker website (7.1 ) for our learn page here:  https://squarekicker.com/learn

They auto play without sound and controls.  But this is how to do it and it does the trick!

Just swap out the vimeo number for yours.  See screenshot.

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

 

Hi Nick! I have tried this in 7.0 and it works in Tremont perfectly, but I'm in 7.1 Marigold now and that doesn't offer the < > within the Video block. Is there a way around that in Marigold? Thanks! 

3 hours ago, KateDesigner said:

Hi Nick! I have tried this in 7.0 and it works in Tremont perfectly, but I'm in 7.1 Marigold now and that doesn't offer the < > within the Video block. Is there a way around that in Marigold? Thanks! 

Hi @KateDesigner,

Have a look at my attached screenshot.  This website below squarekicker is using Squarespace 7.1 site and the video block has the Embed Data option. 

I do not believe Marigold is a 7.1 Template.   In fact, 7.1 do not have traditional "Templates" as they are 1 template and each "Template" is essentially a series of demo content / layout starting positions.  7.0 have different "template options" within specific template families.  7.0 Templates are grouped together in families.  For examples: the 7.0 Tremont template is actually the same template as Camino, Carson, and Henson, but all this different starting demo content.  You can see a chart comparison here:  https://support.squarespace.com/hc/en-us/articles/228344967-Template-comparison-charts  

Let me know if that helps.  Curious to know what template you are using.  Send me a link to your site and I'll let you know what is it.  But regardless of the template, the video block used is the same code on both 7.0 and 7.1 so they should have the same options.