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
  • Views 440
  • Created
  • Last Reply

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.

 

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

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

Archived

This topic is now archived and is closed to further replies.

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