Jump to content

Video delay & pixelation on cover page

Recommended Posts

Site URL: http://www.drserencardoso.com

Hi There,

When I open my homepage (which is a cover page with video) on desktop it starts on the fall-back image which is pixelated (fine on mobile) and then only after a couple seconds the video starts but when it starts the video too is pixelated and only goes high-def after 9 seconds. On vimeo it is high def from the beginning. I have superfast internet, this is not a problem on other pages. I understand there can be minor delays but I really need to fix this to be as perfect as possible. Is there a fix please? Can someone help? I want the video to start sooner and I don't want it to buffer at all if possible. 

Thank you 



Link to comment

I'm having the exact same issue - after emailing and being redirected 3-4 different times they blamed my internet, Vimeo, my custom code (the code i have has nothing to do with videos), one guy even tried to say it wasn't blurry. It seems this has been a common issue in the last few months

Would love if they just fixed this bug instead of trying to pretend it's not a thing

Edited by estherfete
Link to comment

Me too. I have to deal with the same situation. And my internet does not interrupt at all. 
I made some searching on Google about this matter. I suppose that pixelation sometimes happens when data in video files are significantly compressed in order to make the video files smaller and reduce memory usage.

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

Having the same issue. hhttps://www.mata-architects.co.uk/

The video is blurry first the first few seconds and then switches to the original quality.

The video is used as the background image for a cover page in 7.0 Forte template.

We upgraded to from embedded Youtube and got a Vimeo Plus account in order to get this to work cleanly for our homepage.


Also tried adding a default quality to the embed but there is no change:


Link to comment
  • 3 weeks later...

Having same issue - really frustrating after putting so much time and effort into the webpage and videos to have them load inconsistent, pixelated, and unprofessional.  

Also, unfortunate not to see any response from SquareSpace.  They should be "listening" to their customers...

Link to comment
  • 3 weeks later...

I am also experiencing this issue. I've tried linking different videos but the same consist compression issue persists for the first several seconds. www.bbgcreative.com I also have a Vimeo Plus account. No issues with compression until now.

Edited by BBradleyG
Link to comment
  • 2 months later...
  • 1 month later...
  • 2 weeks later...
  • 1 month later...

I'm dealing with a cover page bug of a different nature (elements jumping on load). I double checked and the bug occurs right out of the box and isn't tied to any custom code or assets added to my site. I use the Sofia template. Not sure whether other templates are affected.  

I contacted support (again) and was given the same answer as when I first reported the problem a year ago: Issue noted for review and future bug fixing. In the meantime, my cover page - the first thing potential customers set - looks unprofessional. Not so happy with this.

Edited by GregLassale
Link to comment
  • 5 weeks later...

This is extremely frustrating. The video on my site is super blurry, even with a fast internet connection (100mbps plus)

How am I supposed to rely on Squarespace to show content on the web if they only allow for these pixelated video?

I spend a lot of time trying to get crisp, beautiful video content for my clients, and then when using it on the SS platform it just looks like dog s***.

Can someone from SS please let us know when there will be a fix for this? So many websites are able to show HD video. Not looking for 4k or anything crazy, just something that looks like a decent 1080p

Link to comment
  • 2 months later...

Same issue here….. incredibly frustrating!!! Has been this way for nearly 2 years for me and I just accepted it at first, but having discovered this thread and realised it is a common issue, want to get this finally resolved! The Vimeo plus embedded video on the landing cover page of website starts blurry for 5-8 seconds and makes it look really unprofessional . It doesn’t have anything to do with bad internet speed or video size (which in this instance is small & short in time).


Has anyone discovered a solution or a workaround yet? Has anyone had any luck after contacting Squarespace Customer Support either?

Link to comment
  • 2 weeks later...

@tuanphan and everyone else on this thread I was able to find this code below from this site. 


This is the closest thing to a solution I've been able to find - I tried it but it didn't work, but I am also wondering if I did not implement it correctly. @tuanphan if you have a moment to check this out would you let us know? Thank you so much! 

<script type="text/javascript">

  // Custom script to load the fallback image of a video in the background while loading

  var startObserver = function(sqsVideoEl){

    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
    if (!MutationObserver){

    var getPlayerElement = function () {
      // the element changes from div to iframe during runtime, id is the same though.
      return sqsVideoEl.querySelector('#player');

    var fallbackImageElement = sqsVideoEl.querySelector('.custom-fallback-image');

    var isVideoReady = function(){
      return sqsVideoEl.querySelector('#player.ready');

    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        if (isVideoReady()) {
          getPlayerElement().style.opacity = 1.0;
          fallbackImageElement.style.display = "none";

    var isIframeLoaded = function (){
      if (!sqsVideoEl.querySelector('iframe#player')) {
        setTimeout(isIframeLoaded, 150)
      } else {
        observer.observe(getPlayerElement(), { attributes : true });

      getPlayerElement().style.opacity = 0.0;
      fallbackImageElement.style.opacity = 1.0;
      fallbackImageElement.style.display = "block";

  var init = function(){
    // As there can be multiple background video's on a single page we do this for all of them in a loop.
    var items = document.getElementsByClassName('sqs-video-background');
    var items_len = items.length;
    for (var i = 0; i < items_len; i++) {
      var el = items[i];
    if (console && console.error){
      console.error('Error while trying to load fallback images by default (manual code injection script in Settings > Advanced):', err);




Link to comment
  • 1 year later...

Seriously wish that squarespace would fix this! Cant believe there have been this issue for so many years and it hasn't been fixed. Spoke to customer support about it and they said "there will always be a delay upon a loading a video. Its still loading at the start and thats why its fuzzy. Try making your video less than 5mb." 5mb??!?! Any self respecting content creator will never run a video that small full page. It would be far too compressed and pixelly. How come other platforms can manage it then?? I see so many sites with video background cover pages that load INSTANTLY. I want to know why squarespace cant make this work for us!


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.