How do I swap a video background on mobile?

Ah that makes sense, I thought there might be something I was missing. Thanks again. 👍

I have two videos on my homepage:

https://purple-brass-jgpg.squarespace.com/
password: squarespace

I have no issues showing one for desktop and one for mobile. The desktop is 16:9 and mobile video is 9:16. Both are vimeo links. 

The issue I have is when having them both on the same page, there's some sort of bug on squarespace and due to the different aspect ratios its not allowing the desktop banner to be full width and instead crops top and bottom showing the fall back image behind on different desktop screen sizes.

I've attached screenshots (orange top and bottom are the fall back image behind)

I've message squarespace and they said they are looking for a fix but unsure how long this will take. Is there any way around this until they sort out the fix? The video on desktop and mobile needs to be full screen as thats all that is going to be on that page and so it can't be cropped in height. 

Any help would be appreciated!

Hi @creedon please could you help me do this too!

https://dragonfly-swan-3b9s.squarespace.com/

P/W - sport

8 hours ago, lucybb said:

could you help me do this too!

Did you look at my post? You will need to change the data section ids. Check out Heather Tovey's most excellent looking Squarespace ID Finder.

Sorry @creedon - it has worked in hiding the desktop version on mobile, but hasn't worked in hiding the mobile version on desktop! I've checked the code and it all seems ok. Could you help?

https://dragonfly-swan-3b9s.squarespace.com/

P/W: Sport

17 hours ago, lucybb said:

Could you help?

The password does not work.

@creedon try sport

On 6/8/2023 at 7:11 PM, lucybb said:

I've checked the code and it all seems ok.

It is not OK. Your code has introduced syntax errors that are not in my code. The word section has been added in two locations and it also missing two }.

I suggest copying and pasting my code, replacing your code. Save. Then go back in and replace the data section ids with yours. Then save.

That worked! Thank you so much @creedon 😃

On 11/16/2022 at 3:41 PM, creedon said:

My bad I forgot to include the HTML style tag in the code I posted. I have updated it.

Hi Creedon. I’m hoping that by bumping this topic you can help me out. I’m having the same issue above and need help with adding 2 videos one formatted for desktop and one for mobile to my site. I want each one to only play based on how it’s viewed. What exactly do you need on my end so I can get my site to behave accordingly? 
My site is www.TheHumanOne.com 

I’ve created two identical blocks on my landing page. 1 with the landscape video and 1 with the vertical one. 
any help would be greatly appreciated. 

1 minute ago, BrandonK said:

Hi Creedon. I’m hoping that by bumping this topic you can help me out. I’m having the same issue above and need help with adding 2 videos one formatted for desktop and one for mobile to my site. I want each one to only play based on how it’s viewed. What exactly do you need on my end so I can get my site to behave accordingly? 
My site is www.TheHumanOne.com 

I’ve created two identical blocks on my landing page. 1 with the landscape video and 1 with the vertical one. 
any help would be greatly appreciated. 

@creedon

5 hours ago, BrandonK said:

@creedon

@tuanphan any ideas? 

@BrandonK I didn't see your comment. If you still need help this, just reply, I will give the code