Iframe Lightboxes

[Johani]

This is a desktop-only theme component that adds the ability to open iframes in lighboxes

Github repository link

https://github.com/hnb-ku/discourse-iframe-lightboxes

---

This component adds an “expand” button on top of iframes you enable it on:

Clicking the button will open the iframe in fullscreen in a lightbox:

Clicking either the dark area around the iframe or the x at the top right corner closes the lightbox. The same way it works for default image lightboxes.

---

Settings

You target the iframes based on their origin domains in the component’s settings:

Whatever domains you specify here also need to be whitelisted in the allowed_iframes setting to show up in posts in the first place.

---

Usage examples:

Here’s a couple of examples besides the CodePen iframe above

Google forms iframe:

Embedding the entire weather.gov website:

---

How do I install this?

You install this component just like any other theme. Follow the instructions in the official guide:

How do I install a Theme or Theme Component?

Importing new themes and theme components To import new themes and components, visit www.yoursite.com/admin/customize/themes or via the UI head to Admin > Customize > Themes Then click on import here [1800] you’ll see this [import-modal] You can then import theme files from your device or via a theme repository link. The repository link for each theme is provided by the author on the theme topic. There are also options to import from a specific branch and to specify whether the repository…

Once you’re done, simply add the component to your current theme. Done!

---

Credit:

This component uses Noël Bossart’s fantastic Featherlight library (MIT license - 3kb gzip)

[tophee]

You target the iframes based on their origin domains in the component’s settings:

I suppose these iframes still also need to be activated in the allowed iframes site setting?

[Johani]

Correct, this component will not mess with any whitelisting settings at all.

In order for any iframe to show up in the cooked content of a post - expandable or not - it has to be on the list of allowed_iframes setting like you pointed out.

I’ll add a note about this to the topic.

[patrickrien]

@Johani is this component still functional? If so, any thoughts on why I am not getting the pop-out diagonal-arrows in the upper-right, but rather a blank/dead box?

Here is what I’ve tried:

• Updated themes/components.
• Made sure src links were white-listed in the component and the Discourse settings.
• Tried a few different links, including Google Maps.
• Tried several scenarios with the Media Overlay on/off + Lightbox alone on/off.

Below are some screenshots.

Thx!
-Patrick

---

[amotl]

Dear @Johani,

thank you very much for conceiving and maintaining this theme component.

After installing it on https://community.hiveeyes.org/ the other day, some users recently started to complain that the overall appearance of the head of the page looked different for them. They finally found out the reason was that they blocked cloudflare altogether, so all requests to https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.13/featherlight.min.js would fail.

So, we are humbly asking if there would be a way for you to provide this component in a self-contained variant?

With kind regards,
Andreas.