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?

To install a theme: Head to www.yoursite.com/admin/customize/themes or via the UI head to Admin -> Customize Click the Import button [image] Select “From the web” [image] Enter the URL of the theme as described on the theme: for example https://github.com/SamSaffron/discourse-users-nav Click Import Once done you will have your theme or theme component imported. You will be able to check for updates and update the theme using the UI. [image] Note: imported theme …

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

---