Video delay & pixelation on cover page

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 

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

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.

Can you help?

Can anyone help with this please!?

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:

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

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

Same problem here. Running a Vimeo Plus account. Never was a problem before. The strangest part is that when the video loops, it returns to the pixellation for the first :05 of video.

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.

I'm having the same issue (with YouTube). Anyone find a workaround?

Has anyone found a solution? I use Vimeo Plus and the quality on Squarespace looks like pixelated garbage but looks wonderful on Vimeo, Facebook and other platforms. 

I've been using the embed option, too, which I thought might help. 

Have a look at our cover page's video...yikes!

www.inheritedstories.org

Looking for a fix here as well. Has anyone from Squarespace addressed this yet? It's been well over *2 YEARS*.

Looking to fix this also. Has anyone found a solution?

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.

Having the same problem: https://goodlivingventures.com/enter-site

Also getting a pixelated BG image (Aviator template, info page) regardless of how I format the image (hi res, lo res, large, sm, etc). Looks perfectly crispy until I upload it to the site.

https://goodlivingventures.com/

Same issue!

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

Same issue here!!! Help us SS!

Agreed. Squarespace is grossly ignoring this issue for many users! #pleasefix #squarespace

Hi @tuanphan We have a cover video that welcomes people to our site. Like everyone else on this thread the cover image starts the video but once the video actually starts it's blurry for a little while. Do you know a work around for this by chance? The link for the new site is below. Any insight would be greatly appreciated. Thank you. https://www.artoftileandstone.com/ 

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?

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

https://createyouronlinepresence.com/blog/2018/5/14/improve-loading-experience-when-using-a-background-video-on-squarespace 

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">
(function(){

  // 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){
      return;
    }

    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()) {
          observer.disconnect();
          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 });
      }
    }

    if(!isVideoReady()){
      getPlayerElement().style.opacity = 0.0;
      fallbackImageElement.style.opacity = 1.0;
      fallbackImageElement.style.display = "block";
      isIframeLoaded();
    }
  }

  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];
      startObserver(el);
    }
  }
  try{
    init();
  }catch(err){
    if (console && console.error){
      console.error('Error while trying to load fallback images by default (manual code injection script in Settings > Advanced):', err);
    }
  }

})()

</script>

Chiming in over a year later ... still experiencing the same issue with blurry/fuzzy video footage upon loading.

No resolution or Vimeo upgrades seem to do the trick - anyone found a workaround?

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!