Jump to content

Make background videos work on all mobile devices

Recommended Posts

Video banners don’t always display on mobile devices and it can sometimes feel like hit and miss because there are so many (constantly evolving!) factors that affect whether the video will play. Some are OS based and others are browser based, including connection speed, battery level and video embed attributes.

If the fallback image loads in place of the video, it's probably one of these factors. However, if neither the image or the video loads, you may want to reach out to Squarespace Customer Care to help you troubleshoot.

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment
  • 1 month later...

@paul2009 I'm having the same issue of banner video not playing on mobile (This site PW: letmein).

My client pointed out this site's banner video does play on mobile. Granted, this is a WP site but it makes me wonder why does this work on WP and not SS?

Maybe there's some other way to get the appearance of a background video on mobile with SS... perhaps a .gif (as backup image) to give the appearance of a video? 

Any thoughts?

Thanks. 

 

Link to comment
  • 1 year later...
  • 2 weeks later...
On 1/22/2023 at 6:24 PM, kirillillenkov said:

is there a reason why videos play on some devices and on some don't?

It is impossible to pinpoint the cause without extensive testing on different devices however I can tell you that Squarespace background videos can play on mobile devices. Automatic video playback can be affected by the phone's settings and status, including

  • phone accessibility settings
  • if power save mode is enabled
  • if the battery is low
  • if the cellular signal is low

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment
  • 2 months later...

Hi @paul2009 is this only for backgorund video or video block?

I am using background video now, and I realized some of my friends mobile is not playing. I am considering swapping to a video block instead if a video block guarantees playability.

Any clue? Cheers...

Link to comment
9 minutes ago, Dilon said:

I am considering swapping to a video block instead if a video block guarantees playability.

Have you tried adding a video block to a different page so one of your friends can compare it?

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment
17 hours ago, paul2009 said:

Have you tried adding a video block to a different page so one of your friends can compare it?

I saw it on a friends's friends phone when he checks out the webpage, so i will have to dig to check out what phone he was using.

 

Regardless, from your experience, is a video block more "reliable" when it comes to displaying video? I.e. it will have better viewing compatibility as compared to background video (that doesnt show sometimes due to varies reasons)? 

Link to comment
10 minutes ago, Dilon said:

is a video block more "reliable" when it comes to displaying video? I.e. it will have better viewing compatibility as compared to background video

If you upload your videos to Squarespace, video blocks and background videos use the same <video> HTML element to embed a video media player. As it is the same code, the reliability of an autoplay video should not be any different from the same mobile device.

The difference is that, when you add a background video, it will always include the autoplay, muted and loop attributes so that the video automatically begins to play as soon as it can do so (before it finishes loading). When you add a video block, you choose whether to enable these attributes for autoplay, or wait until the user clicks 'play' manually.

That said, you can also upload your video to a video hosting service but, if you do that, the reliability of playback will also depend on your that third party service and how well it interacts with Squarespace. Using YouTube for background videos is not recommended.

Did this help? Please give feedback by clicking an icon below  ⬇️

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment
On 3/25/2023 at 9:58 PM, paul2009 said:

If you upload your videos to Squarespace, video blocks and background videos use the same <video> HTML element to embed a video media player. As it is the same code, the reliability of an autoplay video should not be any different from the same mobile device.

The difference is that, when you add a background video, it will always include the autoplay, muted and loop attributes so that the video automatically begins to play as soon as it can do so (before it finishes loading). When you add a video block, you choose whether to enable these attributes for autoplay, or wait until the user clicks 'play' manually.

That said, you can also upload your video to a video hosting service but, if you do that, the reliability of playback will also depend on your that third party service and how well it interacts with Squarespace. Using YouTube for background videos is not recommended.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thanks for the detailed response. This clears up for me then. I thought the video block would be a different component code wise to the background hence it would perform differently.

If that is the case,  I would just keep using the background video instead, it is able to crop the sides for mobile which is perfect too. Unfortunately, like we understand, they dont work all the time for various reasons.

Thanks for the heads up and have a nice day!

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.