Background video using embed code

Hi

The opening page of my site has background video using the standard squarespace method. It works perfectly on desktop.

Previously the background video seemed to worked fine on mobile too (iphone..chrome.. ios 13.4.1). But now the background video has stopped working on mobile. It's just a black screen. It's extremely frustrating.

If i embed video on the page manually, i can get it to autoplay on mobile (using background=1) . But it doesn't look right (it does not fill the screen).

Is there a way to match the squarespace background video look (ie always filling the screen, and zooming in to the centre of the video on mobile) using specific embed code?  

Or has anyone found a way to get squarespace background video to work on mobiles (i've seen plenty of non-squarespace sites that work fine)?

Thanks

I'm really struggling with this!
If background video does not work on mobiles on squarespace ( i haven't seen any examples on the forum to suggest it does)  i don't really want viewers to just hit a 'fallback' image as the first thing they see. Is there therefore a way that mobile users can avoid the background video page entirely and jump to another page? So desktop viewers get to see the video background and mobile users jump straight to a gallery page or something more dynamic? I do not have the business package... 

I too am having this problem. Specifically, our home page plays the video (autoplay) for Android devices (mobile phones), iPads, Desktops (Macs running Big Sur and PCs running the latest version of Windows), but not for our iPhone 12's. It DOES work for an iPhone X we tried. All devices have the latest browsers. We also tried Chrome on the iPhone 12, and that did not work either.

Same issues with video background on mobile - it works fine for me but not for anyone else (client and network)

Hey guys, I've developed a fix for this issue.

There is indeed a Squarespace issue that stops background videos from playing on mobile.

My fix for this issue doesn't require you to do anything differently, you still paste your video URL into the background video field as normal.  Here's a demo - 

I think this fix will provide real value to Squarespace website owners, so I'm going to start offering it as a plugin for £40, but before I start writing instructions and setting up the product I just wanted to gauge interest.  I will also be offering it to my existing Squarespace clients.

The plugin has some stipulations:

• You must be using Squarespace 7.1 (but if there's enough interest I'll adapt it to work on 7.0 as well)
• You must have the business plan or higher to be able to paste the custom code for this fix
• You must be using a paid Vimeo account, not Youtube. Most people should be doing this anyway because Youtube videos have youtube stuff all over them resulting in a poor user experience, and a paid Vimeo account is required for background videos
• On iOS there's a feature that stops autoplay videos if the device is in low-power mode.

Please let me know if you're interested, thanks!

Andrew Moore
Digital Freelancer & Squarespace Expert of 6+ years

Hi, that sounds interesting. 

My solution was to create an alternative (and shorter) reel for my client, saved it as a gif so could use it as a fallback image for mobile... 

On 1/20/2021 at 6:31 PM, digitalfreelancer said:

Hey guys, I've developed a fix for this issue.

There is indeed a Squarespace issue that stops background videos from playing on mobile.

My fix for this issue doesn't require you to do anything differently, you still paste your video URL into the background video field as normal.  Here's a demo - 

 

I think this fix will provide real value to Squarespace website owners, so I'm going to start offering it as a plugin for £40, but before I start writing instructions and setting up the product I just wanted to gauge interest.  I will also be offering it to my existing Squarespace clients.

The plugin has some stipulations:

• You must be using Squarespace 7.1 (but if there's enough interest I'll adapt it to work on 7.0 as well)
• You must have the business plan or higher to be able to paste the custom code for this fix
• You must be using a paid Vimeo account, not Youtube. Most people should be doing this anyway because Youtube videos have youtube stuff all over them resulting in a poor user experience, and a paid Vimeo account is required for background videos
• On iOS there's a feature that stops autoplay videos if the device is in low-power mode.

Please let me know if you're interested, thanks!

Andrew Moore
Digital Freelancer & Squarespace Expert of 6+ years

£40 is a bit expensive but how do we pay & receive this as it is a client MUST have!

how can i get this?!  Desperately need ASAP.!

Andrew - this is amazing stuff....b sen looking for this solution for a year now.  Works perfectly!

On 1/26/2021 at 5:19 PM, joelygoe said:

£40 is a bit expensive but how do we pay & receive this as it is a client MUST have!

Hi @joelygoe, if you would like the plugin, you can either send me a private message here on the forum or go to my website https://www.digitalfreelancer.co.uk/ and submit an enquiry. We can then finalise the details by email.

Thanks,

Andrew

For the benefit of anyone else reading this, a quick update since my last post announcing the plugin...

I've had quite a lot of interest through the forum here, Youtube video and my existing clients, so I've written instructions and packaged up the plugin for sale at £40, which I think is good value.

Customers who've already purchased the plugin, like Adam who posted above, have been super happy. I am offering support to anyone having issues. The only issue so far has been with a Vimeo video that wasn't set to allow embedding.

I'm currently in the process of setting up a Squarespace store to sell the plugin as a digital product, but until then I'm communicating with people via email, sending an invoice for payment via Paypal or bank transfer, then sending the instructions and plugin file.

So if you'd like to purchase the plugin you can send me a private message on the forum here or submit a contact enquiry via my website - https://www.digitalfreelancer.co.uk/

Any questions, let me know, thanks.

Andrew

hey andrew - did you ever put together a 7.0 version of this?  One of my old sites could use it!

4 hours ago, adameus said:

hey andrew - did you ever put together a 7.0 version of this?  One of my old sites could use it!

Hey @adameus, yes I did. It works with Brine family templates and is £40. If your template is not part of the Brine family, let me know what template you're using and I'll give you quote for adapting the plugin to work with your template.

I've got your email address as you bought the 7.1 version (thank you) so I'll send you an email now.

Andrew

On 1/20/2021 at 1:31 PM, digitalfreelancer said:

Hey guys, I've developed a fix for this issue.

There is indeed a Squarespace issue that stops background videos from playing on mobile.

My fix for this issue doesn't require you to do anything differently, you still paste your video URL into the background video field as normal.  Here's a demo - 

 

I think this fix will provide real value to Squarespace website owners, so I'm going to start offering it as a plugin for £40, but before I start writing instructions and setting up the product I just wanted to gauge interest.  I will also be offering it to my existing Squarespace clients.

The plugin has some stipulations:

• You must be using Squarespace 7.1 (but if there's enough interest I'll adapt it to work on 7.0 as well)
• You must have the business plan or higher to be able to paste the custom code for this fix
• You must be using a paid Vimeo account, not Youtube. Most people should be doing this anyway because Youtube videos have youtube stuff all over them resulting in a poor user experience, and a paid Vimeo account is required for background videos
• On iOS there's a feature that stops autoplay videos if the device is in low-power mode.

Please let me know if you're interested, thanks!

Andrew Moore
Digital Freelancer & Squarespace Expert of 6+ years

hi Andrew

i would love to buy one, how i can contact you?

4 hours ago, DOMINIK TARABANSKI said:

hi Andrew

 

i would love to buy one, how i can contact you?

See this, only $10. https://www.will-myers.com/products/p/video-element

You can use this plugin, then if you want to make it fullbleed, just share url, we will give the code

16 minutes ago, tuanphan said:

See this, only $10. https://www.will-myers.com/products/p/video-element

You can use this plugin, then if you want to make it fullbleed, just share url, we will give the code

Thank you for sharing that, looks like exactly what I was looking for. I notice that they say you can mute the video. Can I assume that you can also unmute the video or make the page load with video unmuted by default?

8 hours ago, DOMINIK TARABANSKI said:

hi Andrew

 

i would love to buy one, how i can contact you?

Hi @DOMINIK TARABANSKI I'll send you a message now. My plugin works exactly the same as how you'd normally use Squarespace to add a background video - you just paste your Vimeo video link in the section background edit menu.  The actual plugin is just a one-time copy and paste.  You don't need to fiddle around with anything or edit code yourself. And once added, it works with every Vimeo background video you add on your site automatically.

So, been having this trouble for quite some time as well. You would have thought Squarespace would have created some sort of solution in design. 
I went with Andrew’s above. Works super well. Only issue I’m running into is the aspect ratio on mobile cuts off some of the video, but Andrew is very responsive to help. Wrote several detailed emails with solutions. Definitely worth getting, great guy to work with!

Hi everyone,

I'm having a hard time formatting this video on both mobile and desktop (most importantly desktop view) as you can see, my captions below are cut. Can someone please help me with the css codes to format this? Thank you!

site: www.iv-profusion.com