Jump to content

Fallback not showing on newer Iphones

Recommended Posts

Hi! Just noticed that the fallback i have used (jpeg 23kb) is not showing on newer Iphones (11), just a white background color.
It was working a few days ago but now it doesn't load unless i navigate around the page and come back to the index page, and somehow forces the page to load it in.
It works on earlier Iphones and even shows the video too and not only the fallback image. (Iphone,7,8)

I am so frustrated with squarespace and the issues they have with video banners. They take incredible long time to show and you cant host your own. (must use vimeo, youtube etc) 
 

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Have you contacted Squarespace Customer Care about this issue? There have been a number of issues with Background Videos, but if Squarespace don't receive feedback from users, they won't know about them. You can reach out to them here by opening a support ticket.

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

I found a sollution to this which forces the browser to load the fallback before the video:

 

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