Scaling background videos for mobile

On 6/15/2023 at 9:19 PM, 27Moon said:

thanks for your reply. I've added the code but unfortunately it doesn't look correct, now the header is almost completely gone and actually the black banner up and down is not disappearing. Any hints?

Use this new code

@media screen and (max-width:767px) {
[data-section-id="64496145f57a345d30632979"] {
    min-height: unset !important;
    height: 20vh;
}
    [data-section-id="64496145f57a345d30632979"] h1 {
        font-size: 20px;
        line-height: 30px;
        position: relative;
        top: 50px;
    }
}

Hey Tuanphan, 

I just launched a real estate site and am running into the same thing with a background video. On the desktop it looks totally fine but the scaling on mobile is way off. I am guessing most people coming to my site will be looking on their phones so would love to have it correct. 

Website is www.smithmountainlakerealestate.com

attached a few screen shots. What would be the best way to make sure it fits right on both desktop and mobile. Thank you so much for your time. 

On 6/21/2023 at 11:24 PM, BillyDesign123 said:

Hey Tuanphan, 

I just launched a real estate site and am running into the same thing with a background video. On the desktop it looks totally fine but the scaling on mobile is way off. I am guessing most people coming to my site will be looking on their phones so would love to have it correct. 

Website is www.smithmountainlakerealestate.com

 

attached a few screen shots. What would be the best way to make sure it fits right on both desktop and mobile. Thank you so much for your time. 

 

Can you share link to page where you use video?

https://beagle-chinchilla-58ek.squarespace.com/

Hi, I tried all the code and its not working. I want to resize the background on the homepage.

14 hours ago, angellll said:

https://beagle-chinchilla-58ek.squarespace.com/

Hi, I tried all the code and its not working. I want to resize the background on the homepage.

You mean this video?

Hi! I'm having the same issue on my site. https://seniorpost-cms.squarespace.com/new-home

It's a vinmeo video uploaded as a section background. Resizing the page though, the visible part of the video get smaller and smaller until all I have left is the middle of the video. 😞

**update - Besides the other code snippets here, I tried changing the aspect ratio on the iframe to aspect-ration: 16/9 !important; widith: auto!important. If I insert different number, I do see changes there, but just moving the iframe left or right, I can't seem to get it to fully display correctly on mobile.

Can someone help please?

23 hours ago, SarahGrubb said:

Hi! I'm having the same issue on my site. https://seniorpost-cms.squarespace.com/new-home

It's a vinmeo video uploaded as a section background. Resizing the page though, the visible part of the video get smaller and smaller until all I have left is the middle of the video. 😞

 

**update - Besides the other code snippets here, I tried changing the aspect ratio on the iframe to aspect-ration: 16/9 !important; widith: auto!important. If I insert different number, I do see changes there, but just moving the iframe left or right, I can't seem to get it to fully display correctly on mobile.

 

Can someone help please?

I see you solved?

Or no, but if make it fullsize, we will need to reduce its height

@tuanphan I've got the same issue on my website https://matthiashoegg.com/

I'd like the index header video to not be cropped on mobile, so ideally it always maintains it's 16:9 proportions. 

Many thanks 🙏

On 5/10/2024 at 10:40 PM, MatthiasHoegg said:

@tuanphan I've got the same issue on my website https://matthiashoegg.com/

I'd like the index header video to not be cropped on mobile, so ideally it always maintains it's 16:9 proportions. 

Many thanks 🙏

You mean this video?

@tuanphanthat’s the one I want to lock the proportions of, or not crop as much, yes. Thanks for looking into it 🙏🙏

6 hours ago, MatthiasHoegg said:

@tuanphanthat’s the one I want to lock the proportions of, or not crop as much, yes. Thanks for looking into it 🙏🙏

You can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:640px) {
body.homepage .page-banner-wrapper.page-banner-has-video {
    height: 30vh !important;
}
}

6 hours ago, tuanphan said:

You can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:640px) {
body.homepage .page-banner-wrapper.page-banner-has-video {
    height: 30vh !important;
}
}

 

It works! Thanks so much @tuanphan

@tuanphan Hi there - I have tried every custom code in every forum you have replied to for this but none of them work for me. I am trying to have my top video on my homepage not cut off in mobile view on the sides, can you share a custom code that I could try to use for this? https://www.thunderbirdflorida.com

Anyone is interested in using AI Smart cropping the videos so that it can be served with different version automatically? We can achieve that using Cloudinary https://videoapi.cloudinary.com/video-demo/video-smart-cropping but it need to tweak the URL to make it work on SQS background video, drop your Background videos here so we can take a look

hi all, 

same as everyone else I here and the bad mobile adaptation of the desktop site. 
Why Is the formatting for this so difficult?

anyway, my background video on desktop for my cover page looks fine and the button stays put, but for mobile it crops it terribly and the button moves around. Just want it the video to stay full between the borders. 

www.wearesupermutt.com

On 6/13/2024 at 2:50 AM, createwithbecks said:

@tuanphan Hi there - I have tried every custom code in every forum you have replied to for this but none of them work for me. I am trying to have my top video on my homepage not cut off in mobile view on the sides, can you share a custom code that I could try to use for this? https://www.thunderbirdflorida.com

You can use this to Website Tools (under Not Linked) > Custom CSS

@media screen and (max-width:767px) {
section[data-section-id="663dfb6d72e54f336c20d483"] {
video {
    object-fit: contain !important;
}
& {
    min-height: unset !important;
    height: 25vh !important;
}
h1 {
    font-size: 30px !important;
    margin-bottom: 0px !important;
}
.html-block {
    position: relative;
    top: -50px;
}}}