title: Fancybox 3: How to dynamically adjust the height of iframe when preload: false
body: <p>I am testing Fancybox 3 to see how the iframe's height can be dynamically adjusted based on the actual content. Here is what I have:</p>
  
  <pre><code>&lt;a class="iframe-link" data-type="iframe" href="/page-mini.html" &gt;
      iframe
  &lt;/a&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
      $(".iframe-link").fancybox({
          iframe: {
              preload: false 
          },
          afterLoad : function(instance, slide) {
             slide.$slide.find('iframe').on('load', function() {
                instance.update(); 
             });
          }
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>This code is not working. I have to use <code>preload: false</code> for better user experience and to be able to dynamically adjust the height because inside the frame I will show a few pages of different height. the page-mini.html is just a few lines of text. </p>