Scaling background videos for mobile

Hi @tuanphan! Could you please help with my homepage section background videos to scale for mobile??

I have two videos - each is the background of a different section.

I just need both videos on mobile to fit in the background of each section.

https://deep-learning-cafe.squarespace.com/

password: password123

🙏

On 5/25/2022 at 6:30 PM, IwanJ said:

Hi @tuanphan! Could you please help with my homepage section background videos to scale for mobile??

I have two videos - each is the background of a different section.

I just need both videos on mobile to fit in the background of each section.

https://deep-learning-cafe.squarespace.com/

password: password123

🙏

Did you solve this?

Hi there,

I've been following this thread as having the same issue.  I'd like to stop my homepage video resizing on mobile viewing.  I've successfully managed this through copying and pasting the code below.

I do, however, now have a background black box showing as per the attached screenshot.  Any thoughts as to how I might work around this would be much appreciated.

https://rhombus-dachshund-pwjt.squarespace.com

password: vanity

Many thanks.

Katie

@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;
}}

39 minutes ago, KatieEdieChalk said:

Hi there,

I've been following this thread as having the same issue.  I'd like to stop my homepage video resizing on mobile viewing.  I've successfully managed this through copying and pasting the code below.

I do, however, now have a background black box showing as per the attached screenshot.  Any thoughts as to how I might work around this would be much appreciated.

https://rhombus-dachshund-pwjt.squarespace.com

password: vanity

Many thanks.

Katie

@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;
}}

edit this class name

Quote

section#new-page-2

to this

section#vanity-brothers-showreel

Thank you very much, that's definitely helped.  Is there anyway to reduce the black border (to the sides and bottom) completely?  

See screenshot.

I am having the same issue: https://www.youraustinliving.com

On 6/16/2022 at 11:10 PM, KatieEdieChalk said:

Thank you very much, that's definitely helped.  Is there anyway to reduce the black border (to the sides and bottom) completely?  

See screenshot.

You should check original video, I see it has padding on left/right side

On 6/17/2022 at 1:57 AM, DMcMurry said:

I am having the same issue: https://www.youraustinliving.com

Add to Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="627d28849738ff589dee3772"] video {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
[data-section-id="627d28849738ff589dee3772"] {
    min-height: unset !important;
}
}

May I clarify the point "you should check original video, I see it has padding on left/right side"?  Should I ask the client to prepare the video to different dimensions?  How can they reduce the padding, assuming it's relating to the original video preparation rather than the template styling.

Many thanks

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

Hi I'm having a similar issue - I have tried various provided codes from different forums with the correct section ID's and haven 't found any luck. In theory I would love to keep the same background video for the mobile version of my site with the frame repositioned so faces aren't cropped out. But if this is not possible I'd be fine with just a static image on mobile.

Please advise.

17 hours ago, 5ake5 said:

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

Hi I'm having a similar issue - I have tried various provided codes from different forums with the correct section ID's and haven 't found any luck. In theory I would love to keep the same background video for the mobile version of my site with the frame repositioned so faces aren't cropped out. But if this is not possible I'd be fine with just a static image on mobile.

Please advise.

Add to Design > Custom CSS

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

I have tried several codes for sitewide scaling of background video and images for mobile view. None of the codes have worked for me. 

www.reachnaz.com

16 hours ago, wbbosworth said:

I have tried several codes for sitewide scaling of background video and images for mobile view. None of the codes have worked for me. 

www.reachnaz.com

Try adding to Design > Custom CSS

/* Mobile resize video */
@media screen and (max-width:767px) {
[data-section-id="62f31ecb7b4b7845ab6aced8"] {
    min-height: unset !important;
    height: 35vh;
}
}

This worked for the home page video, but I would like to also resize every page size background video or image. Most pages have an image(s) - only two pages have a video.

On 8/22/2022 at 11:24 PM, wbbosworth said:

This worked for the home page video, but I would like to also resize every page size background video or image. Most pages have an image(s) - only two pages have a video.

Can you share link to all pages where you use video/image, need to resize?

About Us — Reach Church of the Nazarene (reachnaz.com)

Give — Reach Church of the Nazarene (reachnaz.com)

Connect — Reach Church of the Nazarene (reachnaz.com)

Reach Groups — Reach Church of the Nazarene (reachnaz.com)

Contact 2 — Reach Church of the Nazarene (reachnaz.com)

On 8/24/2022 at 11:49 AM, wbbosworth said:

About Us — Reach Church of the Nazarene (reachnaz.com)

Give — Reach Church of the Nazarene (reachnaz.com)

Connect — Reach Church of the Nazarene (reachnaz.com)

Reach Groups — Reach Church of the Nazarene (reachnaz.com)

Contact 2 — Reach Church of the Nazarene (reachnaz.com)

Edit 5 Pages > Add a Code Block at bottom of page > Paste this code

<style>
  @media screen and (max-width:767px) {
article section:first-child {
    min-height: unset !important;
    height: 45vh;
}
}
</style>

16 hours ago, tuanphan said:

Edit 5 Pages > Add a Code Block at bottom of page > Paste this code

<style>
  @media screen and (max-width:767px) {
article section:first-child {
    min-height: unset !important;
    height: 45vh;
}
}
</style>

 

Worked perfectly. I did run into one problem on one page (www.reachnaz.com/give). I have a button that is an overlay on the background photo. In mobile view, the button covers the words in the picture.

On 8/28/2022 at 8:15 AM, wbbosworth said:

Worked perfectly. I did run into one problem on one page (www.reachnaz.com/give). I have a button that is an overlay on the background photo. In mobile view, the button covers the words in the picture.

Edit page > Click Mobile icon on top right > Then you can move down the button. This won't affect desktop.

I wondered whether I could get help with resizing my loading page on my sit for mobile? I have a spinner animation that shows up in the center on my desktop when my sections are loading but the position of it on mobile is pushed to the left I'd like it to be in the center of the page. 

On 10/13/2022 at 3:16 AM, LK199236 said:

I wondered whether I could get help with resizing my loading page on my sit for mobile? I have a spinner animation that shows up in the center on my desktop when my sections are loading but the position of it on mobile is pushed to the left I'd like it to be in the center of the page. 

What is your site url? & Which code did you use?

@tuanphan could you assist me with my banner video on www.headstrongathlete.com?

1. Do you know what the standard ratio is for the banner on desktop? If I select fill, it cuts off the top and bottom of the video slightly.

2. Is it mobile to upload a mobile version of the video, so the desktop and mobile have different dimensions? If not, I'd like to keep the current ratio on my mobile version.

Thank you!

18 hours ago, jondrees said:

@tuanphan could you assist me with my banner video on www.headstrongathlete.com?

1. Do you know what the standard ratio is for the banner on desktop? If I select fill, it cuts off the top and bottom of the video slightly.

2. Is it mobile to upload a mobile version of the video, so the desktop and mobile have different dimensions? If not, I'd like to keep the current ratio on my mobile version.

Thank you!

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="62ddd86f6801f980488a6a02"] {
    min-height: unset !important;
    margin-top: 10vh;
}
}

On 1/5/2023 at 7:32 AM, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="62ddd86f6801f980488a6a02"] {
    min-height: unset !important;
    margin-top: 10vh;
}
}

 

@tuanphan Thanks again, that worked great.

One other question. The way they set up the pages, the video gets hidden behind the top navigation on the desktop. I know I can change the settings from "fill" to "insert" and then adjust the page margins, but do you know a code that I can increase the top padding of the video, so it is contain within the page, and not hidden behind my top menu?

On 1/7/2023 at 12:00 AM, jondrees said:

@tuanphan Thanks again, that worked great.

One other question. The way they set up the pages, the video gets hidden behind the top navigation on the desktop. I know I can change the settings from "fill" to "insert" and then adjust the page margins, but do you know a code that I can increase the top padding of the video, so it is contain within the page, and not hidden behind my top menu?

You mean desktop? Try this

@media screen and (min-width:992px) {
[data-section-id="62ddd86f6801f980488a6a02"] .section-background {
    margin-top: 100px;
}
}

On 1/7/2023 at 7:50 PM, tuanphan said:

You mean desktop? Try this

@media screen and (min-width:992px) {
[data-section-id="62ddd86f6801f980488a6a02"] .section-background {
    margin-top: 100px;
}
}

 

Thank you!