Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Playsinline Video on Mobile and 7.1


Smartyart

Question

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! 

Link to comment
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

5 answers to this question

Recommended Posts

  • 0

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

1465171763_AutoplayVideoonSQSP.thumb.png.7862dd46de2130be5a6fb61be841d8b9.png

Edited by NickIppolito
Updated with Vimeo and Youtube References

SquareKickerHi, I'm Nick Ippolito, founder at squarekicker.com SquareKicker is a No-Code Design & Animation Extension for Squarespace. Say goodbye to copy & paste plugins and unlock your creativity and explore a whole new level of the unlimited design possibilities without ever having to write a single line of code.

Link to comment
  • 0
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>

 

Autoplay Video Block.png

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! 

Link to comment
  • 0
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! 

338311261_VideoBlockSQSP7.1EmbededData.thumb.png.137668aaa4f5b9ee635f085a4d2000c5.png

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.  

SquareKickerHi, I'm Nick Ippolito, founder at squarekicker.com SquareKicker is a No-Code Design & Animation Extension for Squarespace. Say goodbye to copy & paste plugins and unlock your creativity and explore a whole new level of the unlimited design possibilities without ever having to write a single line of code.

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