# IFrame Lightboxes
**URL:** https://meta.discourse.org/t/iframe-lightboxes/89853
**Category:** Theme component
**Tags:** broken
**Created:** [June 14, 2018, 6:56am UTC](https://meta.discourse.org/t/iframe-lightboxes/89853 "2018-06-14T06:56:22Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [June 14, 2018, 6:56am UTC](https://meta.discourse.org/t/iframe-lightboxes/89853/1 "2018-06-14T06:56:22Z")
This is a theme component that adds the ability to open iFrames in lightboxes.
**Samples**
This component adds an “expand” button on top of the 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**
There’s only one setting. You add the domains that you want to have this functionality on there.
> ⚠ Whatever domains you specify here also need to be whitelisted in the `allowed_iframes` site 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](http://weather.gov) website:
### Credit:
This component uses [Noël Bossart’s](https://noelboss.com/) fantastic [Featherlight](https://noelboss.github.io/featherlight/) library (MIT license - 3kb gzip)
| | | |
| --- | --- | --- |
| 🛠 | **Repository** | [GitHub - hnb-ku/discourse-iframe-lightboxes · GitHub](https://github.com/hnb-ku/discourse-iframe-lightboxes) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
---
### Author:  [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [June 14, 2018, 8:20am UTC](https://meta.discourse.org/t/iframe-lightboxes/89853/2 "2018-06-14T08:20:05Z")
> [@Johani](#):
>
> 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?
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [June 14, 2018, 11:51am UTC](https://meta.discourse.org/t/iframe-lightboxes/89853/3 "2018-06-14T11:51:49Z")
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.
---
### Author:  [@patrickrien](https://meta.discourse.org/u/patrickrien)
#### Post date: [February 18, 2019, 4:06pm UTC](https://meta.discourse.org/t/iframe-lightboxes/89853/4 "2019-02-18T16:06:52Z")
@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
* * *
---
### Author:  [@amotl](https://meta.discourse.org/u/amotl)
#### Post date: [April 10, 2019, 2:58am UTC](https://meta.discourse.org/t/iframe-lightboxes/89853/5 "2019-04-10T02:58:39Z")
Dear @Johani,
thank you very much for conceiving and maintaining this theme component.
After installing it on [https://community.hiveeyes.org/](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.
---
### Author:  [@Zup](https://meta.discourse.org/u/Zup)
#### Post date: [October 3, 2021, 10:49pm UTC](https://meta.discourse.org/t/iframe-lightboxes/89853/6 "2021-10-03T22:49:22Z")
Why is it desktop-only?
---
### Author:  [@Malek1](https://meta.discourse.org/u/Malek1)
#### Post date: [October 13, 2021, 2:47am UTC](https://meta.discourse.org/t/iframe-lightboxes/89853/7 "2021-10-13T02:47:00Z")
I had a bug this theme component, post contents weren’t showing.
---
### Author:  [@cmdntd](https://meta.discourse.org/u/cmdntd)
#### Post date: [October 30, 2021, 6:50pm UTC](https://meta.discourse.org/t/iframe-lightboxes/89853/8 "2021-10-30T18:50:02Z")
Could I trigger open iframe in a any link simply?
User just see iframe only when click at link
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [October 31, 2021, 3:52am UTC](https://meta.discourse.org/t/iframe-lightboxes/89853/9 "2021-10-31T03:52:20Z")
Welp… this one fell through the cracks. It’s been a while since it got any attention, and a lot has changed in Discourse.
Better late than never… 🙃
I just pushed an update that should fix all the problems.
[https://github.com/hnb-ku/discourse-iframe-lightboxes/commit/54e9766e0d68f09f2384b50e129515bb1cc67ca8](https://github.com/hnb-ku/discourse-iframe-lightboxes/commit/54e9766e0d68f09f2384b50e129515bb1cc67ca8)
> [@patrickrien](#):
>
> is this component still functional?
It will be after you update.
> [@amotl](#):
>
> asking if there would be a way for you to provide this component in a self-contained variant?
The component is now self-contained with no external requests.
> [@Zup](#):
>
> Why is it desktop-only?
After you update, it will work on mobile too.
> [@Malek1](#):
>
> post contents weren’t showing
Should be fixed after you update
> [@cmdntd](#):
>
> User just see iframe only when click at link
This is out of the scope of this component. You need a different component to handle that.
Apologies for the delay, and thanks for the feedback 👍
---
### Author:  [@amotl](https://meta.discourse.org/u/amotl)
#### Post date: [November 29, 2021, 4:47pm UTC](https://meta.discourse.org/t/iframe-lightboxes/89853/10 "2021-11-29T16:47:09Z")
> [@Johani](#):
>
> > [@amotl](#):
> >
> > asking if there would be a way for you to provide this component in a self-contained variant?
>
> The component is now self-contained with no external requests.
Thanks a stack!
> [@Johani](#):
>
> Apologies for the delay, and thanks for the feedback.
No need to apologize, nice to see you have been able to give it some love, in between all the other things going on. We really appreciate it.
---
### Author:  [@Zup](https://meta.discourse.org/u/Zup)
#### Post date: [December 24, 2021, 12:19am UTC](https://meta.discourse.org/t/iframe-lightboxes/89853/11 "2021-12-24T00:19:51Z")
> [@Johani](#):
>
> > [@cmdntd](#):
> >
> > User just see iframe only when click at link
>
> This is out of the scope of this component. You need a different component to handle that.
Is there already a component that can open an iframe lightbox in a link that way?
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [December 24, 2021, 9:47am UTC](https://meta.discourse.org/t/iframe-lightboxes/89853/12 "2021-12-24T09:47:52Z")
I’m not aware of any existing components that do that, so you’d have to create one or commission that work in the #Marketplace category.
This theme component [checks `iFrame`](https://github.com/hnb-ku/discourse-iframe-lightboxes/blob/master/javascripts/discourse/api-initializers/iframe-lightboxes.js#L37-L53) tags in a post and compares their `src` attribute to a [list of eligible sources](https://github.com/hnb-ku/discourse-iframe-lightboxes/blob/master/javascripts/discourse/api-initializers/iframe-lightboxes.js#L8-L12) provided by the admin in the component settings. If the source domain matches, it adds the [lightbox button](https://github.com/hnb-ku/discourse-iframe-lightboxes/blob/master/javascripts/discourse/api-initializers/iframe-lightboxes.js#L48). Showing the lightbox is handled by [featherlight.js](https://noelboss.github.io/featherlight/). Featherlight listens to clicks on elements with the [`data-featherlight`](https://github.com/hnb-ku/discourse-iframe-lightboxes/blob/master/javascripts/discourse/api-initializers/iframe-lightboxes.js#L48) attribute. If one of those is clicked, it opens the lightbox with the contents of that iFrame.
You can do the same with `` tags in a different component with a little bit of wrangling. If the link `href` matches a domain listed in the component settings, lightbox it in an iframe. Otherwise, leave it as a regular link. You don’t want all links to open in a lightboxed iframe.
Most of the required work is already handled by this component so you can just hard-fork it and start from there. There’s no plans to add that feature to this component because it’s only meant to handle iFrame tags in posts.
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [October 20, 2022, 1:53pm UTC](https://meta.discourse.org/t/iframe-lightboxes/89853/13 "2022-10-20T13:53:43Z")
Here is one method for including an iFrame Lightbox inside a clickable inline text element …
The [Discourse Footnotes Plugin](https://meta.discourse.org/t/discourse-footnote/84533) accepts HTML as well as Markdown inside popup footnotes.
So for example this code …
… generates this clickable popup footnote containing a mini iFrame with the **Expand content** button on the top right corner …
To make this work I have (in site settings) enabled both **enable markdown footnotes** and **display footnotes inline** …
Then I added that site’s domain name (_[microchic.com](http://microchic.com)_) to the **allowed iframes** list in site settings …
… and also in the list of **iframe origin domains** in the iFrame Lightbox Plugin settings …
You can try it out live here …
> **[Features Plugins and Tools](https://noobish.me/t/features-plugins-and-tools/165)**
>
> \[Not all of these still work - in progress…\] ▶ Table of contents --\> This post is a quick reference tool for authors on this site. All of the features, plugins, tools, code snippets and online services used in the Post Composer/Editor on this...
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [March 21, 2023, 10:00pm UTC](https://meta.discourse.org/t/iframe-lightboxes/89853/14 "2023-03-21T22:00:45Z")
Hi was wondering how you format posts. I get a blank box using
iframe src=" url" surrounded by \< \> That is even when using [codepen.io](http://codepen.io) that is on the main site whitelist iframes.
---
### Author:  [@Alon1](https://meta.discourse.org/u/Alon1)
#### Post date: [June 27, 2024, 4:05pm UTC](https://meta.discourse.org/t/iframe-lightboxes/89853/15 "2024-06-27T16:05:41Z")
Is this component still working? It used to work for me in the past but stopped working for some reason.
Seems like last update was 3 years ago: [hnb-ku/discourse-iframe-lightboxes (github.com)](https://github.com/hnb-ku/discourse-iframe-lightboxes) So reasonable to assume something broke?
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [June 27, 2024, 5:22pm UTC](https://meta.discourse.org/t/iframe-lightboxes/89853/16 "2024-06-27T17:22:58Z")
It was working in May as used it here.
> [@Rumble.com onebox for videos not working / Video object JSON LD](https://meta.discourse.org/t/rumble-com-onebox-for-videos-not-working-video-object-json-ld/191902/7):
>
> I have found this to work. Add "[https://rumble.com/](https://rumble.com/)“Allowed Iframes” to Site settings. Then click on embed in rumble video. Switch from Jave Script to iframe and copy & past in your post. I will check but there might be an auto iframe theme component that may work to just post the rumble link. But not sure.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [June 30, 2024, 3:00am UTC](https://meta.discourse.org/t/iframe-lightboxes/89853/17 "2024-06-30T03:00:05Z")
It works on my side with the latest Discourse version.
Is there any error in the browser console?
---
### Author:  [@meglio](https://meta.discourse.org/u/meglio)
#### Post date: [July 1, 2024, 1:36am UTC](https://meta.discourse.org/t/iframe-lightboxes/89853/18 "2024-07-01T01:36:37Z")
Can’t make this work, I followed the guide precisely and added the domain to both the theme component and the site setting. Here’s what I get:
No errors recorded in js developer console.
allowed iframes site setting has the top-level domain:
`https://example.biz/`
The theme component settings has it without https as by the existing examples:
`example.biz`
Any ideas how to debug?
---
### Author:  [@Alon1](https://meta.discourse.org/u/Alon1)
#### Post date: [July 3, 2024, 4:46pm UTC](https://meta.discourse.org/t/iframe-lightboxes/89853/19 "2024-07-03T16:46:04Z")
no errors in the console.
I’m using it with PDF previews: [Inline PDF Previews - #116 by Alon1](https://meta.discourse.org/t/inline-pdf-previews/157649/116)
I expect to get the expand arrows above the PDF
But they simply won’t show up
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [July 4, 2024, 8:08pm UTC](https://meta.discourse.org/t/iframe-lightboxes/89853/20 "2024-07-04T20:08:30Z")
Can you try this [fork](https://github.com/Arkshine/discourse-iframe-lightboxes/tree/improve-compatibility) instead?
URL: `https://github.com/Arkshine/discourse-iframe-lightboxes`
Branch: `improve-compatibility`
You were lucky before if it was working!
Both TCs use the same API to decorate a post, so the order in which you install them would be necessary. Also, the iframe source is set dynamically once the PDF has been downloaded and may not be available immediately in this IFrame Lighboxes TC.
The changes I made are basically:
- Search for iframe elements in the next run loop, so iframe is guaranteed to be available
- Wait for the iframe to load so you can retrieve the source URL
Let me know if it works better. 👍
[Next page](https://meta.discourse.org/t/iframe-lightboxes/89853.md?page=2)