An url will be detected as an iframe if the hostname of the url differs from the hostname of the page.

<a href="external-url.com" class="bblb">Iframe</a>

It is recommended to define the width (data-bblb-width) and height (data-bblb-height) of the iframe. The specified width and height will be used to set the maximum size. The size of the iframe is responsive so it will fit smaller screens. If no value is defined the lightbox will use its default value (width: 800px, height: 600px).

<a href="external-url.com" class="bblb" data-bblb-width="500" data-bblb-height="500">Iframe</a>

Width and height of the iframe have a constant ratio by default. This means if the width is set to 800px and the height is set to 400px, the iframe will be at the most 800px wide and always half as high. If the viewport of the browser has space only for an iframe 400px wide it would be 200px high. It is possible to disable this by settting the data-bblb-proportional-attribute to false.

<a href="external-url.com" class="bblb" data-bblb-width="800" data-bblb-height="400" data-bblb-proportional="false">Iframe</a>

When the slide with the iframe is not the active slide, the source of the iframe gets set to empty. The reason for this is that an iframe can have sound so it is necessary to close the document that is shown inside the iframe. It is possible to disable this by settting the data-bblb-closehidden-attribute to false.

<a href="external-url.com" class="bblb" data-bblb-closehidden="false">Iframe</a>