How to get access to the initial blank white block and change its style when iframe preload is false?

Question

I am using Fancybox 3 for my project. Here is my code

modal: true,
iframe: {
    css: {
        width : '900px',
        height: 'auto'
    },
    preload: false 
}

When the fancybox starts to show, it first shows a blank white block. This white block stays half a second or one or two seconds depnding on the content. Please see this screenshot:

I would like to access it and do some customization. How can I get access to it? How to change its style?

Answer 1

It depends on what you want to customize. This is how, for example, you can make background transparent:

.fancybox-slide--iframe .fancybox-content,
.fancybox-iframe {
  background: transparent;
}

This is how you can append, for example, loading icon:

$('[data-fancybox]').fancybox({
  iframe : {
    preload : false
  },
  afterLoad : function(instance, slide) {
    slide.mySpinner = $( instance.opts.spinnerTpl ).appendTo( slide.$slide )
  },
  afterShow : function(instance, slide) {
    slide.mySpinner.remove();
  }
});

Demo - https://codepen.io/anon/pen/rzORYL