Jump to content

Decreased quality for background videos on mobile

Recommended Posts

Hello,

I am working on a website where I need to add a video from Youtube as a Banner.

Everything works fine but the quality of the video in the banner is really low and all pixelated. I'd like those to be at least at 720, better at 1080.

How can I fix this? 

This is the video I am embedding: 

I've tried with this URL: https://www.youtube.com/watch?v=BIIJXp-gumY

and with this: https://youtu.be/BIIJXp-gumY

Thank you!

Link to comment
  • 2 weeks later...
  • 2 weeks later...
  • 5 weeks later...
  • 7 months later...

Squarespace formatting tips don't address this issue. They are recommending optimizing for speed, not quality. We are a visualization firm and having this same issue. Video quality is paramount. Perhaps someone has figured this out. Super frustrating and would likely be a reason we would dumb Squarespace if it can't be fixed. Our videos look beautiful on YouTube and awful in our website.

Link to comment
  • 4 weeks later...
  • 1 month later...
  • 4 weeks later...

Are you embedding video directly from You tube or just uploading it by yourself ? But If you are uploading a video at your own directly into the site, it will slow down the speed for your site. And I think video is not a good option, you can add images like infographics it will also engage the user and will not impact badly too much on your site's speed. What is your site all about ? Is it about Read light novels or any service related site ?

Link to comment
  • 3 weeks later...
  • 2 weeks later...

I'm having the same issue (YouTube link to video). From what I can make out it is to do with the pushed quality of the video. For some reason it defaults to 480p. If I go to the video on YouTube and change the settings in the player to 1080p and return to my site, it's fine. There has to be a way to force externally linked videos to only play at the best settings. 

Link to comment
  • 1 month later...

@PixelForge code works for Vimeo videos. Ive just done some scouring and it seems if you add
" ?vq=hd1080 " to the end of the embed code, it'll default to 1080p videos for Youtube.

Its worked for my site! 

On 5/26/2021 at 9:15 PM, PixelForge said:

I'm having the same issue (YouTube link to video). From what I can make out it is to do with the pushed quality of the video. For some reason it defaults to 480p. If I go to the video on YouTube and change the settings in the player to 1080p and return to my site, it's fine. There has to be a way to force externally linked videos to only play at the best settings. 

 

On 5/14/2021 at 5:44 AM, BriGuy said:

Looking for help on this as well! Anyone?!?!?

 

 

On 4/24/2021 at 6:08 AM, ckatzzzz said:

I'm experiencing this on Vimeo embedded videos. Anyone have a solution? Are there any Squarespace admins that can offer help?

 

Link to comment
  • 3 weeks later...

I was having the same issue. Adding the "?vq=hd1080" unfortunately did not work for my site.

What DID work was:

1. Uploading the video in YouTube as unlisted (originally was using Vimeo)

2. Opening the video link

3. Under settings, changing the quality to 1080 HD.

4.. Copying the link directly from the open video player

I hope this helps someone else as I tried all the other options to no avail!

Link to comment
  • 1 month later...

 

On 7/27/2021 at 5:08 PM, madisonree said:

I was having the same issue. Adding the "?vq=hd1080" unfortunately did not work for my site.

What DID work was:

1. Uploading the video in YouTube as unlisted (originally was using Vimeo)

2. Opening the video link

3. Under settings, changing the quality to 1080 HD.

4.. Copying the link directly from the open video player

I hope this helps someone else as I tried all the other options to no avail!

@madisonree did this continue to work for you? it worked for me originally but then with every loop the quality degraded

Link to comment
  • 1 month later...
  • 2 weeks later...
  • 3 weeks later...

If you're referring to hosted video backgrounds on 7.1, Squarespace optimises these for different devices, and this can result in lower clarity in order to achieve smooth playback on a phone.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
On 11/15/2021 at 2:15 PM, paul2009 said:

If you're referring to hosted video backgrounds on 7.1, Squarespace optimises these for different devices, and this can result in lower clarity in order to achieve smooth playback on a phone.

Ya well optimization needs work here, as it displays a quite pixelated video on mobile, which in the end is not a good result.
I went back to hosting video on vimeo, even if doesn't always work on mobile, I'm better of with the mobile fallback image..

Link to comment
  • 1 month later...
On 7/27/2021 at 5:08 PM, madisonree said:

I was having the same issue. Adding the "?vq=hd1080" unfortunately did not work for my site.

What DID work was:

1. Uploading the video in YouTube as unlisted (originally was using Vimeo)

2. Opening the video link

3. Under settings, changing the quality to 1080 HD.

4.. Copying the link directly from the open video player

I hope this helps someone else as I tried all the other options to no avail!

This worked for me! After hours of workarounds. Thank you!

Link to comment
  • 1 month later...

Hi everyone,

Super frustrated with this myself recently but I found a fix that worked for me. Hosting my video on a paid Vimeo account, but this might work for non-paid accounts too, don't know...

In Vimeo, on the video settings page for the vid you want to use, click the gear icon on the video window itself and check the quality setting. Mine was set to auto, so I changed this setting to 1080p...

VERY IMPORTANT: After changing the setting to 1080p, make sure you do nothing else before selecting Share in the top right corner, and copying the video link. This will copy a link to the video with the quality setting you just made. If you do anything else before copying the link, the quality resets back to Auto.

One you've got your link, go back to Squarespace and paste in your Vimeo link. It will look exactly the same as it did before, but for me at least, the quality is now 1080p straight away when I load my site.

Hope this helps. 

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.