Force Background Video to Playback at Full Resolution? (Custom CSS)

Site URL: http://ryanmariehelfant.com/

Is there Custom CSS code to force my background video to playback at full resolution from the second it appears?

Can it fully load at max resolution before it starts playing? 

No matter the file size, resolution, codec, and FPS, it automatically buffers at low resolution for EXACTLY 6 SECONDS before snapping into full resolution.

(I have tried video ranging from 5MB to 1GB, 480p to 1080p, H.264 and Apple Pro Res, 24FPS and 25FPS - none of this makes a difference! It seems that there is something embedded in Squarespace that causes an exact 5 second low resolution buffer period).

@bangank36 ?

That's pretty odd.

Try uploading to youtube?

Edit, also maybe this will help?

https://vimeo.zendesk.com/hc/en-us/articles/224983008-Setting-default-quality-for-embedded-videos

@rwp I tried all on Youtube as well. Unfortunately Background Videos only accept URLs, not Embedded Videos!

I'm having this same problem! Were you able to solve it?

Desperately following this topic. Client is hosting on YouTube. Was thinking of using a pro Vimeo account, but it appears the issue persists regardless of source url. 

I'd rather have the thumbnail exist for a second or two, and let the video play smoothly at 2K when it's ready. 

I am having the exact same issue.

I am quickly losing faith in SquareSpace.  There support gave me some mumbo jumbo about custom code messing it up.  However what I have is only cosmetic.  

Wordpress is looking better and better each day.

@RyanCaldarone@Septemousthere is no way to get it. i called square space direct and they said they are aware of the issue and there is no solve at the moment.

I had my developer check it out ..

Quote

The problem might be in height / width

I believe youtube sets quiality based on that

currently it's around 640 or something

but I'm not 100% sure

As SquareSpace sets the height and width - it is an issue on their side.

I coded the video to their 720p specs.

Was there any follow up on this from Squarespace? I just discovered I'm having the same problem, regardless of video background, regardless of codec, regardless of YT upload resolution or export resolution, it hit's full buffer in the same point in the video (likely that 6 second spot op described). Can anyone explain what's going on here or how we can avoid this? There has to be some sort of navigation around this to pre-buffer 1080p, or lock it at 720p so you don't get those jarring resolution switches.

Thanks in advance.

Any progress on this? I've been waiting for Squarespace or anyone to come up with a workaround or a fix for about 2 years. It really makes no sense for this to STILL be broken after all this time.😒

This is really rather bad as the muddy first seconds kinda completely destroy the first impression that a video on a cover page is supposed to create. 

Squarespace needs to fix this either by downloading / hosting the video or letting it buffer a bit longer ...

Same here, this is really crucial for me as motiondesigner.
Don't want to switch back to selfhosting like Wordpress just because of that issue.

www.vinzent.me

Having the same issue. Spoke to squarespace said that they were aware and trying to fix. However seems like they don't really care as this issue has been going on for years it seems. Thinking of jumping ship but wish I didnt have to rebuild my site on another platform. But I see so many sites that full quality video plays instantly on. This really shouldn't be a problem for such a leading site building service.

If you would try my https://www.squarewebsites.org/squarespace-plugins/background-videos-utils and enable  my simple iframes - it will respect the quality settings (you may set in backgrounds itself, use values accordingly, its ?quality=1080p for Vimeo, Youtube stopped support from query and uses adaptive stream now it seems, you were able to do ?vq=hd1080 before). SS realisation will ignore this, but plugin will try to use. 

On 1/31/2023 at 3:10 AM, michaeleparkour said:

If you would try my https://www.squarewebsites.org/squarespace-plugins/background-videos-utils and enable  my simple iframes - it will respect the quality settings (you may set in backgrounds itself, use values accordingly, its ?quality=1080p for Vimeo, Youtube stopped support from query and uses adaptive stream now it seems, you were able to do ?vq=hd1080 before). SS realisation will ignore this, but plugin will try to use. 

This is THE BEST SOLUTION to this freaking problem. Thank you. I just dropped the code in the cover page section and set the appropriate values and the background videos load straight to HD. Thank YOU! I was about to switch to WIX, saved a ton of work.