Resize Section background video for mobile

Site URL: https://khaki-tambourine-ydy3.squarespace.com/home

Hi folks,

Can't find a specific solution to this.

Looking to add code to resize a section background video so it doesn't crop in mobile view.  I will have a few of these in the body of various pages (not header/banner videos) so the code could be universal if that helps.

URL is a demo site that will go live once it's ready: https://khaki-tambourine-ydy3.squarespace.com/home

Thanks

Scott

8 hours ago, ScottLarge said:

Site URL: https://khaki-tambourine-ydy3.squarespace.com/home

Hi folks,

Can't find a specific solution to this.

Looking to add code to resize a section background video so it doesn't crop in mobile view.  I will have a few of these in the body of various pages (not header/banner videos) so the code could be universal if that helps.

URL is a demo site that will go live once it's ready: https://khaki-tambourine-ydy3.squarespace.com/home

Thanks

Scott

 

 

Your site is private. If you can setup password & share url again, we can check easier

Apologies -  

Password:  DPM2021

On 10/11/2021 at 5:38 AM, ScottLarge said:

Apologies -  

 

Password:  DPM2021

Try adding to Design > Custom CSS

/* resize mobile video */
@media screen and (max-width:767px) {
[data-section-id="615f7420e34f93769db4b923"] video {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

[data-section-id="615f7420e34f93769db4b923"] {
    min-height: unset !important;
    height: 15vh;
}
}

Hi all,

quick question, i am having issues with video backgrounds not playing on mobile and thought it was an SS thing, but I go to your demo site on my mobile and even though it is not adjusted as you like you have it playing. How did you do this??? 

On 10/15/2021 at 10:32 PM, mfndxi said:

Hi all,

quick question, i am having issues with video backgrounds not playing on mobile and thought it was an SS thing, but I go to your demo site on my mobile and even though it is not adjusted as you like you have it playing. How did you do this??? 

When adding video, try upload video to Squarespace, instead of using Vimeo or Youtube links

Hello everyone - I am having the same problem.  The video is showing correctly in Squarespace for both mobile and website, however, when I look at the page on my iPhone the video does not show up and it looks like the block is cropped.  Any help would be greatly appreciated.

https://www.smlca.org/elementary

20 hours ago, JessicaRobb said:

Hello everyone - I am having the same problem.  The video is showing correctly in Squarespace for both mobile and website, however, when I look at the page on my iPhone the video does not show up and it looks like the block is cropped.  Any help would be greatly appreciated.

https://www.smlca.org/elementary

You should upload video to your site or use direct vimeo video url. Use Gg drive url won't work properly.

Thank you so much - I thought that might be the problem.