Scaling background videos for mobile

Site URL: https://www.spurdigitalmedia.com/home-new-2

My client wants this video as his homepage background. Looks fine on desktop, but the sides are cropped on mobile. I get that Squarespace thinks I want the mobile to be full height just like on desktop, but I actually want the original aspect ratio of the video to remain on mobile. 

Add to Page Settings > Advanced > Header

<style>
  @media screen and (max-width:767px) {
  #page section:first-child iframe#player {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
#page section:first-child {
    min-height: unset !important;
    height: 70vh !important;
}
  }
</style>

On 9/19/2020 at 3:11 PM, tuanphan said:

Add to Page Settings > Advanced > Header

<style>
  @media screen and (max-width:767px) {
  #page section:first-child iframe#player {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
#page section:first-child {
    min-height: unset !important;
    height: 70vh !important;
}
  }
</style>

 

Hi Tuanpan,

I have the same issue with 2 videos on my homepage, how do I apply this code to work on my site. 

My site is:

https://beagle-tangerine-ex9m.squarespace.com

Site password: digitalnative

Or is there a way to replace the background video with a different video scaled for mobile?

On 11/13/2020 at 9:33 AM, bangank36 said:

HI Sarah,

Your site is private, please provide a password so we can check

its digitalnative

On 12/9/2020 at 5:34 PM, sarahgilchrist said:

its digitalnative

You mean homepage header video?

I am having the same issue, and when I used the code supplied above it looks good in the squarespace mobile preview on my computer but when I test it on a phone, it just goes to my mobile fallback image.  I test it on a tablet and it looks fine in landscape, but when the tablet is portrait, it cuts off still.  I'm new to webdesign and css so I'm not sure I'm following the different parts of the code, but I appreciate all your help.

www.focused-architects.com

Thanks for all your help!

On 5/18/2021 at 11:11 AM, Lilmac024 said:

I am having the same issue, and when I used the code supplied above it looks good in the squarespace mobile preview on my computer but when I test it on a phone, it just goes to my mobile fallback image.  I test it on a tablet and it looks fine in landscape, but when the tablet is portrait, it cuts off still.  I'm new to webdesign and css so I'm not sure I'm following the different parts of the code, but I appreciate all your help.

 

www.focused-architects.com

 

Thanks for all your help!

You mean this video?

yes...on mobile devices, the video doesn't adjust it's size to be legible...is there a way to do that?

On 5/21/2021 at 9:17 AM, Lilmac024 said:

yes...on mobile devices, the video doesn't adjust it's size to be legible...is there a way to do that?

Hi. It looks like you solved this?

Thank you for the help...I'm still having the issue on phones and when a tablet is held vertical...  See below for different views on different devices.

Desktop:

Phone (Vertical/Portrait): 

Phone (Horizontal/Landscape😞

Ipad (Vertical/Portrait):

Ipad (Horizontal/Landscape):

Try adding to Design > Custom CSS

@media screen and (max-width:1024px) {
.sqs-video-background .custom-fallback-image {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    min-width: unset !important;
    min-height: unset !important;
}
[data-section-id="609a00db171f38714802d29e"] {
    min-height: unset !important;
}
}

I am having similar complications. Any assistance would be appreciated! www.mercitalent.com  - the mobile view is very low quality and cropped inward. Thanks in advance!

On 10/3/2021 at 12:12 AM, rachaelthedinosaur said:

I am having similar complications. Any assistance would be appreciated! www.mercitalent.com  - the mobile view is very low quality and cropped inward. Thanks in advance!

Add to Design > Custom CSS > then save & reload the site

@media screen and (max-width:767px) {
[data-section-id="615270f2733491282201cfd2"] video {
    width: 100% !important;
    height: auto !important;
}

[data-section-id="615270f2733491282201cfd2"] {
    min-height: unset !important;
    height: 35vh;
    margin-top: 20vh;
}
}

On 9/19/2020 at 3:11 PM, tuanphan said:

Add to Page Settings > Advanced > Header

<style>
  @media screen and (max-width:767px) {
  #page section:first-child iframe#player {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
#page section:first-child {
    min-height: unset !important;
    height: 70vh !important;
}
  }
</style>

 

Amazing, thanks!

HELP! I am having the same issue with my background video on my homepage (reachnaz.com). I have tried the codes listed above, saving, and reloading, but they have not worked.

Hey there, I have been taking stabs at copying and pasting tons of different code pieces to try and resize my background video on my homepage to fit my mobile...but to no luck. 

If anyone could help me out that would be greatly appreciated!

chinookcanna.ca

On 3/1/2022 at 10:19 AM, wbbosworth said:

HELP! I am having the same issue with my background video on my homepage (reachnaz.com). I have tried the codes listed above, saving, and reloading, but they have not worked.

Add to Design > Custom CSS

/* resize home top video mobile */
@media screen and (max-width:767px) {
[data-section-id="621464506fb34e56fd7fead9"] video {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
[data-section-id="621464506fb34e56fd7fead9"] {
    min-height: unset !important;
    height: 35vh !important;
}
}

On 3/2/2022 at 7:48 AM, ChinookCanna said:

Hey there, I have been taking stabs at copying and pasting tons of different code pieces to try and resize my background video on my homepage to fit my mobile...but to no luck. 

If anyone could help me out that would be greatly appreciated!

chinookcanna.ca

Hi. What is access password?

Hi there, I'm having the same issue and just cannot get any of the codes to work... Any help will be huuugly appreciated! add2beecreative.com

On 3/4/2022 at 11:20 PM, adrianc84 said:

Hi there, I'm having the same issue and just cannot get any of the codes to work... Any help will be huuugly appreciated! add2beecreative.com

You mean video above this text??

ADD2BEE CREATIVE SPECIALISE IN DIGITAL STORY TELLING, CONTENT CREATION

13 hours ago, tuanphan said:

You mean video above this text??

ADD2BEE CREATIVE SPECIALISE IN DIGITAL STORY TELLING, CONTENT CREATION

 

Hi!! Yes exactly, the video that start with the word ,Hello!

On 3/9/2022 at 4:14 AM, adrianc84 said:

Hi!! Yes exactly, the video that start with the word ,Hello!

Add this new code to Design > Custom CSS

@media screen and (max-width: 640px) {
    body.homepage .Parallax-item:first-child iframe {
        width:100% !important;
        left: 0 !important;
        height: auto !important;
        inset: unset !important;
        top: 0 !important;
        height: 200px !important;
    }
body.homepage .Parallax-item:first-child figure.Index-page-image.loaded {
    transform: unset !important;
    bottom: 0 !important;
    height: 200px !important;
}
section#new-page-2 {
    height: 250px !important;
}}

Hi. I tried to use the code above but unfortunately I'm having a hard time getting my video to play on mobile view. It only shows the default image. Any help? pairedupmedia.com

On 4/7/2022 at 12:47 AM, MJH22 said:

Hi. I tried to use the code above but unfortunately I'm having a hard time getting my video to play on mobile view. It only shows the default image. Any help? pairedupmedia.com

Hi,

You want to scale image on mobile or make video show on mobile or make video autoplay on mobile?

On 4/9/2022 at 8:32 PM, tuanphan said:

Hi,

You want to scale image on mobile or make video show on mobile or make video autoplay on mobile?

I would like to make video play on mobile the same as it does on the desktop.