Iframes

The Carousel HTML plugin is used to display an HTML <iframe> element. It is possible to set custom dimensions for the <iframe> element or enable auto-resizing when it is resized to fit the dimensions of the iframe page. Note that auto-resizing will only work for files that comply with the browser's security policies.

Declarative

<a href="/iframe.html" data-fancybox data-type="iframe">Defaults </a>

<a href="/iframe.html" data-fancybox data-type="iframe" data-autosize="true">
  Auto-sizing is enabled
</a>

<a href="/iframe.html" data-fancybox data-type="iframe" data-preload="true">
  Preloading is enabled
</a>

<a href="data:text/html,<p>Some HTML</p>" data-fancybox data-type="iframe">
  Dynamic iframe content
</a>

<a data-fancybox data-type="pdf" href="your.pdf">PDF file</a>

Example of customization by passing options to the HTML plugin:

Fancybox.bind("[data-fancybox]", {
  Carousel: {
    Html: {
      autosize: true,
    },
  },
});

There are two ways to resize an iframe - using CSS or the data-width and data-height attributes of the trigger element:

<a
  href="/iframe.html"
  data-fancybox
  data-type="iframe"
  data-width="400"
  data-height="400"
>
  Custom width and height using data attributes
</a>

Setting width and height in percentage is also supported:

<a
  href="/iframe.html"
  data-fancybox
  data-type="iframe"
  data-width="80%"
  data-height="80%"
>
  Custom width and height using data attributes
</a>

Another way is to use CSS to target the element that contains the iframe element:

.fancybox__slide.has-iframe .f-html {
  width: 400px;
  height: 400px;
}

Programmatic

Example of displaying <iframe> with custom dimensions:

Fancybox.show([
  {
    src: "/iframe.html",
    type: "iframe",
    width: 600,
    height: 300,
  },
]);

Example of passing custom options to an HTML plugin where auto-resizing is enabled:

Fancybox.show(
  [
    {
      src: "/iframe.html",
      type: "iframe",
    },
  ],
  {
    Carousel: {
      Html: {
        autosize: true,
      },
    },
  },
);