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

Banner videos not displaying on mobile

Recommended Posts

I am having some trouble getting the banner/background videos to play on mobile on the site I am working on for a small private school: www.applewild.org

The vimeo link is here: 

 

I realize that Squarespace doesn't control whether the background video is shown on mobile devices - it is controlled by the mobile browser, and I have suggested to them that they change the resolution of the video to 720 instead of 1080 to see if that makes the video small enough for more mobile devices to process but they are pushing back, saying "to have beautiful high-res videos and not be able to share them is disappointing. The browsers that we've noticed aren't supporting the videos are actually on NEW phones, not old ones, so I don't think the problem is going to go away until there's a squarespace solution. I'd love to figure out a game plan for how to find a fix as soon as possible." I don't know what "fix" there is, other than what I've already suggested (and they haven't tried). The feature is not designed for high-resolution video streaming, I don't think. Has anyone encountered this issue or have any insight? 

Share this post


Link to post

Actually, it is controlled at OS level rather than browser level. Android and iOS have both blocked autoplay background video until recent releases. 

The attributes needed for autoplay to work are 

  • autoplay
  • muted
  • playsinline

The first two apply to Android and iOS, the third is iOS only. 

Even then there are numerous exceptions that can  prevent autoplay from working.

  • If the video has a soundtrack
  • if the device is in Low Power or Battery Saver mode
  • some browsers apply the muted attribute incorrectly and this blocks playback 
  • ..and others

 


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post

I am having the same issues on my site but we’re half way there!


Video background even plays on older iPhones but on iPhone Xs it won’t play at all on either Safari or Chrome. Phone is not in power saver mode. Video has no soundtrack. File is 720p and is only 13mb. We’ve tried both Vimeo and YouTube. Help!

 @colin.irwin How do you plug in those attributes you described? Any help or suggestions here would be super appreciated. 

Share this post


Link to post

Has anyone actually gotten video backgrounds on mobile to work successfully?  I've reached out to Squarespace 3 times and each time they cite Vimeo and Youtube as the source of potential problems, but everything's been done to their specs, so I'm not sure what the problem is.

Share this post


Link to post
Posted (edited)

I wonder if there's already been some sort of follow-up or solution on the side of Squarespace on this matter. I still have the same problem, though to me this functionality is crucial and I need it to work. I tried to reach out to Squarespace a couple of times and all I got was the same simplified answers (which brings me back to the beginning). Is there someone who could really give an advise on how to solve this? Or is the only true solution to move to another website building service?

Edited by Suzanneras

Share this post


Link to post
14 hours ago, Suzanneras said:

I wonder if there's already been some sort of follow-up or solution on the side of Squarespace on this matter. I still have the same problem, though to me this functionality is crucial and I need it to work. I tried to reach out to Squarespace a couple of times and all I got was the same simplified answers (which brings me back to the beginning). Is there someone who could really give an advise on how to solve this? Or is the only true solution to move to another website building service?

With mobile, it's 50/50. That's why the mobile fallback image is suggested, you could use a .gif to replicate a video-like effect but I've had video banners play on an iPhone XS but not on an iPhone 7 for example. 

Share this post


Link to post

Why isn't this figured out yet by Squarespace?
Why can't you add these embed options in the header?
I can add a video block with embed code that work..
So many people have answered this to Squarespace without any clear answer.
Just that there 'are' exceptions.. 

Share this post


Link to post

Hi, I've seen quite a few sites in which background video (autoplay, mute, filling screen) works fine on mobile. So it's clearly possible.
But i can't get it to work on squarespace. Is there a workaround? Is a plugin required? Has anyone figured this out?

Thanks in advance....
 

Share this post


Link to post

Yes I have exactly the same issue. It was working now it’s just stopped. Why do we pay for a premium service on Squarespace and this happens my mobile site looks terrible I only noticed yesterday when I upgraded and edited the site

Share this post


Link to post

I'm a new Squarespace premium member and can't get a short background video to work on mobile. Works on desktop but not on iPhone11 / Safari or Chrome. Vimeo Premium acc: 720p / no sound. 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...