# Shadowboxes for IFRAMEs
**URL:** https://meta.discourse.org/t/shadowboxes-for-iframes/89135
**Category:** Support
**Created:** [June 4, 2018, 7:06pm UTC](https://meta.discourse.org/t/shadowboxes-for-iframes/89135 "2018-06-04T19:06:43Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@Emmanuel\_Schanzer](https://meta.discourse.org/u/Emmanuel_Schanzer)
#### Post date: [June 4, 2018, 7:06pm UTC](https://meta.discourse.org/t/shadowboxes-for-iframes/89135/1 "2018-06-04T19:06:43Z")
We run a community site for teachers who are using the [Bootstrap](http://www.BootstrapWorld.org) curriculum to teach computer science inside mainstream math, science, and social studies classes. Our IDE is cloud-based, so we have the ability to embed an instance of it inside a post on Discourse – this is freaking awesome, and we’re already thrilled to have moved to the platform based on this one feature alone. 🙂
However, there’s plenty of content we’d like to embed this way, and some of it is wider than the post width will allow. Customizing the CSS to permit wider posts hasn’t been fruitful, and ultimately what I’d love is for IFRAMEs to be treated the same way as images: a thumbnail is shown, but clicking it opens a shadowbox that’s as wide as the browser window.
I’ve never messed with Discourse plugin development before, but I could also imagine some kind of Onebox extension that takes URLs matching a particular pattern and generates the appropriate markup. Perhaps there’s an easier way? Curious if anyone else has run into this use-case.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [June 4, 2018, 11:56pm UTC](https://meta.discourse.org/t/shadowboxes-for-iframes/89135/2 "2018-06-04T23:56:59Z")
Maybe @Johani would have some ideas. In general heavy embedding of live content is a bad idea, whereas “click-to-load” like codepen does is more ideal:
https://codepen.io/adrianroworth/embed/preview/OpeyZq?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=OpeyZq
---
### Author:  [@Emmanuel\_Schanzer](https://meta.discourse.org/u/Emmanuel_Schanzer)
#### Post date: [June 5, 2018, 12:29pm UTC](https://meta.discourse.org/t/shadowboxes-for-iframes/89135/5 "2018-06-05T12:29:05Z")
Thank you both for the quick reply!
@craigomez, I might be misreading your post, but it sounds like you’re suggesting I modify the source of the page I’m embedding, in order to have links in that page open in a shadowbox. Is that right? If so, let me clarify that I don’t want that – rather, I want the _enclosing IFRAME_ (a node in the rendered topic, which just happens to contain another page) to be in a shadowbox. And if that’s _not_ right, and I misunderstood, my apologies. 🙂
@codinghorror, click-to-load is a mighty fine solution. Happy to pursue that option, if there’s a resource somewhere to follow?
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [June 6, 2018, 1:25am UTC](https://meta.discourse.org/t/shadowboxes-for-iframes/89135/9 "2018-06-06T01:25:40Z")
It would be super cool if you could maximize without needing to visit the site, I wonder if this is a feature @chriscoyier would be interested in adding, not sure how it would be wrangled, but it makes sense for this example you made, for sure.
---
### Author:  [@Emmanuel\_Schanzer](https://meta.discourse.org/u/Emmanuel_Schanzer)
#### Post date: [June 6, 2018, 12:22pm UTC](https://meta.discourse.org/t/shadowboxes-for-iframes/89135/10 "2018-06-06T12:22:18Z")
I’d love to make our editor click-to-load. Is there an example somewhere for how this was done with CodePen? I’m assuming whitelisting [WeScheme.org](http://WeScheme.org) in our installation is the least of the steps needed.
---
### Author:  [@mcwumbly](https://meta.discourse.org/u/mcwumbly)
#### Post date: [June 6, 2018, 12:34pm UTC](https://meta.discourse.org/t/shadowboxes-for-iframes/89135/11 "2018-06-06T12:34:13Z")
check out this previous post/topic for additional context:
> [@Embedding pens from CodePen](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/7):
>
> Hey Team, oEmbed for CodePen is ready to rock: [oEmbed! – CodePen](http://blog.codepen.io/documentation/features/oembed/) Lemme know if you have any questions or anything.
Seems like that is done on the codepen side?
> **Make the preview “Click-to-Load”** : Check the checkbox next to “use click-to-load” to enable the preview version for your embedded Pen. Preview embeds show a static image preview of your Pen with a “Run Pen” button. When your visitors click the button, the Pen will load.
via: [Embedded Pens – CodePen](https://blog.codepen.io/documentation/features/embedded-pens/)
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [June 14, 2018, 6:58am UTC](https://meta.discourse.org/t/shadowboxes-for-iframes/89135/12 "2018-06-14T06:58:09Z")
This is now possible with a theme component:
> [@IFrame Lightboxes](https://meta.discourse.org/t/iframe-lightboxes/89853):
>
> 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…
---
### Author:  [@Emmanuel\_Schanzer](https://meta.discourse.org/u/Emmanuel_Schanzer)
#### Post date: [June 14, 2018, 7:48pm UTC](https://meta.discourse.org/t/shadowboxes-for-iframes/89135/13 "2018-06-14T19:48:49Z")
Very interesting! I was able to install the theme using the linked directions (thanks!), but I don’t see a UI for editing the theme settings in order to whitelist my site. Any suggestions for where I should be looking? Thanks in advance!
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [June 15, 2018, 2:21am UTC](https://meta.discourse.org/t/shadowboxes-for-iframes/89135/14 "2018-06-15T02:21:45Z")
If you’ve installed the theme and cannot see the settings area, then that probably means you’re on a version of Discourse that does not support theme settings.
Even if you’re on the stable branch, the latest release, 2.0, supports theme settings so I would suggest you update Discourse and try again.
---
### Author:  [@Emmanuel\_Schanzer](https://meta.discourse.org/u/Emmanuel_Schanzer)
#### Post date: [June 15, 2018, 12:05pm UTC](https://meta.discourse.org/t/shadowboxes-for-iframes/89135/15 "2018-06-15T12:05:24Z")
Success! Thanks so much, @Johani! And thanks to everyone else who chimed in with suggestions and advice!
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [December 26, 2020, 4:19pm UTC](https://meta.discourse.org/t/shadowboxes-for-iframes/89135/16 "2020-12-26T16:19:15Z")
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [August 19, 2023, 11:20am UTC](https://meta.discourse.org/t/shadowboxes-for-iframes/89135/17 "2023-08-19T11:20:20Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.