Jump to content

Resize Section background video for mobile

Recommended Posts

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

 

 

Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

image.thumb.png.61278b0fc572d556c820263e5221dcdf.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.