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

Thanks, Colin! The three attributes you listed first, are those OS settings that I have no control over or are those setting that should be selected in Vimeo to make the video compatible? 

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

Create an account or sign in to comment

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


×
×
  • Create New...