Jump to content

How to change background video size and avoid cropping on mobile? 7.0 version

Recommended Posts

Site URL: http://www.nathanpalm.com

Hi,

I'm having trouble with the video cropping on the mobile version. Is it possible to make the video smaller (it's too vertical and larger than I'd prefer) while also maintaining its original aspect ratio to avoid this really cropped in look?

site: nathanpalm.com

pw: test

Thanks!

Link to comment
On 5/30/2022 at 11:07 PM, Napalm said:

@Web_Solutions Thanks! The video size looks much better but the video continues to crop even further in. Is there a way to get it back to its original picture without the crop while remaining at this size?

Screen Shot 2022-05-30 at 9.05.45 AM.png

Screen Shot 2022-05-30 at 9.04.57 AM.png

Edit this code

@media screen and (max-width: 640px) {
    body.homepage .Parallax-item:first-child iframe {
        width:100% !important;
        height: 100% !important;
        left: 0 !important
    }

    body.homepage .Parallax-item:first-child figure {
        transform: unset !important;
        bottom: 0 !important;
    }
}

to this

@media screen and (max-width: 640px) {
    body.homepage .Parallax-item:first-child iframe {
        width:100% !important;
        height: 100% !important;
        left: 0 !important;
    }
    body.homepage .Parallax-item:first-child figure {
        transform: unset !important;
        bottom: 0 !important;
    }
section#montage {
    min-height: 25vh !important;
}
}

Then save & reload the site

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.