Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

How do I display background video in HD only?


Recommended Posts

Hi there,

I have uploaded a video from my Vimeo Plus account, which I assumed would playback in HD quality. The video is a text animation, so unfortunately it looks really bad at low res.

As it is a banner video, squarespace only accepts the URL and not the embedded code of the video.

Index page - Media - Video - URL

Is there any code I can use to force playback HD always?

Website: www.oddthing.co.nzPassword: oddthingltd

Thank you!

Edited by oddthing
Link to comment
  • 1 month later...

I see you went with a GIF solution. This seems like a major flaw in the video background support from squarespace.

Vimeo defaults to "auto resolution" which seems to be the problem (especially with non-standard video sizes). Vimeo supports supports ability to specify resolution  in embedded videos but since squarespace doesn't use the embed code format for background videos, the feature is not supported. 

Raw background video iframe

<iframe id="vimeoplayer" src="//player.vimeo.com/video/376011636?api=1&background=1" class="background-video ready" style="width: 2225.09px; height: 585px; left: -334.545px; top: 0px;"></iframe>

Edited background video iframe

<iframe id="vimeoplayer" src="//player.vimeo.com/video/376011636?api=1&background=1&quality=2k" class="background-video ready" style="width: 2225.09px; height: 585px; left: -334.545px; top: 0px;"></iframe>

By manually inspecting the code of a page with a BG video and manually adding "&quality=2k" to end of src url, I am able to specify resolution and background video displays at that resolution. But aside from some super ugly custom JS I'm not sure there is a way to use this feature inside of squarespace platform.

Anyone have a better solution? 

edit: People have had occasional success in simply adding "&quality=2k" (see more resolution codes) to vimeo link URL in the page setting pop-up. 

Edited by papercut
new information
Link to comment
On 12/2/2019 at 11:24 AM, aseriousartist said:

Hello everyone,

With regard to the previous solution, I'm wondering if adding this "&quality=2k" to the end of the src url made a difference and you were able to play the background video  in HD?

Also, where did you add the "&quality=2k"? To the script on vimeo or on squarespace. Please let me know, thanks.


Adding it on the squarespace where you embed worked for me.

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