Resize background video on mobile without pixelation

Site URL: https://trombone-walrus-wzht.squarespace.com

password: test

How can I resize the two background videos of the mockup laptop and phone to fit within the width of the page on mobile without pixelating the video?

Desktop background videos:

Mobile background videos:

2 hours ago, AllanYung said:

Site URL: https://trombone-walrus-wzht.squarespace.com

password: test

How can I resize the two background videos of the mockup laptop and phone to fit within the width of the page on mobile without pixelating the video?

Desktop background videos:

Mobile background videos:

I 've found that your video, image have the right width

Do you still need help?

22 minutes ago, bangank36 said:

I 've found that your video, image have the right width

Do you still need help?

Hey, yes I still need help. Sorry if I was not clear enough. Those are not the right images. Try these links on mobile:

https://trombone-walrus-wzht.squarespace.com/#6

https://trombone-walrus-wzht.squarespace.com/#7

37 minutes ago, AllanYung said:

Hey, yes I still need help. Sorry if I was not clear enough. Those are not the right images. Try these links on mobile:

https://trombone-walrus-wzht.squarespace.com/#6

https://trombone-walrus-wzht.squarespace.com/#7

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  section[data-section-id="61b28968e2a8a218a82baa49"]  .section-background  .sqs-video-background-native {
    height: 45%;
    top: 50%;
    transform: translateY(-50%);
  }
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

My testing result

29 minutes ago, bangank36 said:

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  section[data-section-id="61b28968e2a8a218a82baa49"]  .section-background  .sqs-video-background-native {
    height: 45%;
    top: 50%;
    transform: translateY(-50%);
  }
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Hey it fits really well. I decreased the height to 40% just in case. I did the same for the mobile mockup. However, they are still extremely pixelated. I don't understand why it's so clear on a larger device such as a desktop but pixelated on a mobile device. Is there any way to resize a background video for mobile without degrading the quality?

2 hours ago, AllanYung said:

Hey it fits really well. I decreased the height to 40% just in case. I did the same for the mobile mockup. However, they are still extremely pixelated. I don't understand why it's so clear on a larger device such as a desktop but pixelated on a mobile device. Is there any way to resize a background video for mobile without degrading the quality?

Do you mean this section getting trouble?

10 hours ago, bangank36 said:

Do you mean this section getting trouble?

Hey I think I somewhat found a way around. I basically re-exported the video in portrait mode under 20mb and uploaded it to Squarespace. I hide the portrait version on desktop screen sizes and hide the landscape version on mobile screen sizes. 🤷‍♂️

Great! It 's good to know that you 've figured out