Make background videos work on all mobile devices

Site URL: https://elephant-quillfish-ct6l.squarespace.com

Password: Pineapple

Hey folks

I have added a background video to this site https://elephant-quillfish-ct6l.squarespace.com and reduced it to fit on mobile a little better. 

The problem I have is that it isn't playing on mobile and just shows the fall back image?

Any ideas?

Actually after another search I have found that it might be down to connection speed and isn't always going to show on mobile.

Is there another way?

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.

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

@paul2009Update... I converted the video to a .gif and loaded it as the back up image... seems to be working well.

Hi. I’m struggling with a problem, all was great before but recently started to be a real problem. Background videos do not play on 50% mobile devices while on other 50% they do work great. Either autoplay do not work or it’s just black screen, with the same browser. Is there a turnaround?

Website example: https://www.piconstruction.ca

Password: 123

Thanks,

K

You can consider adding a fallback image, if video doesn't play, it will show an image instead

On 1/13/2023 at 2:08 PM, tuanphan said:

You can consider adding a fallback image, if video doesn't play, it will show an image instead

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

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

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

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?

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

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

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!