Decreased quality for background videos on mobile

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!

Did you ever figure this out?

I hope someone can help soon. My videos look terrible.

Sorry I reply this late...but I never figured it out...the video on the homepage looks terrible while all the others are fine...maybe it's something related to the length of the video? 😩

Hey everyone, 

Squarespace has some formatting tips in what concerns background videos that you may find helpful in this help article here:

Adding background videos - Design tips

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.

yep, I Am about to jump ship because of this problem to. looks horrible and blurry

Also experiencing this, so frustrating!

Same issue here. Customer support has been worthless. No issues doing this on Wix.

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 ?

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

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

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. 

Just found this on another Squarespace thread (not my credit, thank 'aseriousartist')

Try adding "&quality=2k" to the end of the URL link. I think it works...  

@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?

Thank you PixelForge and tommiatke for your suggestions - unfortunately my Squarespace site with a homepage looping background video (on Vimeo) still starts out fuzzy every time.

This could be a deal-breaker for my client.

Squarespace tech folks, please chip in on a solution!

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!

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

Site URL: https://www.wunderarchitectes.fr/

Hello,

URL : www.wunderarchitectes.fr

I don't understand why the background video I uploaded (file, not youtube or vimeo link) on the header is in good quality on desktop and very low on mobile? Any help on how to address that?

Thanks!

Cloé

I am experiencing the same thing. I wonder if the mobile version of the upload is forcing some sort of lower quality to make loading easier on phones?

If anyone can chime in that'd be great!

Bump here, got the same issue on this website: garancecreative.com (pass: mcforever)

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.

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..

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!

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.