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:

Capture2: 689x370

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

Capture3: 690x416

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:

Capture4: 690x176

:warning: 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:

Capture5: 690x424

Embedding the entire weather.gov website:

Capture: 690x379


How do I install this?

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

https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682

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)