Improve loading experience when using a background video on Squarespace

Have you had trouble with the loading time of your page when you insert a Video as a background image and kept seeing a grey background instead of the Video? So did I. 

Loading video will always be slow when initially loading a page. Most of the time this is not a problem as you generally start loading a video only on user interaction but with a fancy Squarespace video background in your header, the video becomes a crucial part of your design. Especially because it's 'above the fold' (the first thing you see on a website without scrolling) we need something there to show when loading the video.
The best would be if Squarespace would allow for a fallback image to show in place of the video while loading and automatically switch to the video when ready.

Unfortunately, this feature is not available but Squarespace does have a mobile fallback image that is shown when on a slow mobile device instead of the heavy video. What we're going to do in this code hack is use this mobile fallback image to always show until the video is ready to play (also on the desktop). To use this code hack do the following:

Go to SETTINGS - ADVANCED - INSERT CODE

Insert this code in the FOOTER block:

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

Now all you have to do is upload a matching 'mobile fallback image' to your video backgrounds and it will be shown until the video is ready to rock and roll!

One idea would be to use the first frame of your video (if that makes sense) as it will then smoothly fade into your video.

Hope this helps

Lucia_