Jump to content

Resize background video on mobile without pixelation

Recommended Posts

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:

676959412_ScreenShot2021-12-09at9_30_38PM.thumb.png.51a490f241e894e53b7b66dd50282015.png

1462904934_ScreenShot2021-12-09at9_30_43PM.thumb.png.2e5c7c8f1749e1adcd80d0475edbb73b.png

Mobile background videos:

IMG_3089.thumb.PNG.388522e94ad79a83c540a4a21753a413.PNG

IMG_3090.thumb.PNG.b7df692c4b5af83d6d04151f4ca95e3e.PNG

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

image.png.c678b3cce75c1a10f644838d6851afd0.png

image.png.9d95b72b8ddf1ff904acd055fa2a7aae.png

Do you still need help?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing result

image.png.f9cbae33e842566b228119db5700d52e.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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?

Link to comment
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?

image.png.42e80958ffa21b4c6e74b0c854d81b8f.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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.