Embed Iframes in Joomla

Paste an iframe into a Joomla article, click Save, and it's gone. Joomla's default text filters remove the iframe tag for every user group except Super Users, and TinyMCE's default Prohibited Elements list drops it in the editor before the save even happens. The usual fix is to loosen the text filters, which also waves through scripts and anything else an editor pastes. You can embed iframes in Joomla with one HTML snippet in Code Snippets.

The snippet is an HTML snippet with the Shortcode insertion method. Anywhere you write {tcs snippet.iframe --url=...}, Code Snippets writes the iframe when the page renders. The shortcode is plain text, so the editor and the filters leave it alone, and the filters can stay as they are. Shortcode parameters in HTML snippets are part of Code Snippets Pro.

How to add this snippet

Install Code Snippets if it isn't installed already.
Log into your Joomla backend.
Go to Components → Tassos Code Snippets.
Click New.
Enter the title Iframe. The title decides the shortcode's name: the snippet named Iframe answers to {tcs snippet.iframe}.
Set Code Type to HTML.
Set Insertion Method to Shortcode.

Paste this code into the editor. Each {tcs attr.name} tag is replaced with the matching shortcode parameter:

<iframe src='{tcs attr.url}' width="{tcs attr.width}" height="{tcs attr.height}"
        loading="lazy" style="border: 0; max-width: 100%;" allowfullscreen></iframe>

Click Save. The Shortcode field now shows the exact tag to copy.
Click Save & Close.

Using the shortcode

Write the tag in any article, module or anywhere else Code Snippets replaces shortcodes:

{tcs snippet.iframe --url=https://www.openstreetmap.org/export/embed.html?bbox=23.70,37.96,23.74,37.99 --width=600 --height=400}

The shortcode takes 3 parameters:

--url: the address of the page to embed.
--width: the width in pixels, like 600, or 100% to fill the article.
--height: the height in pixels, like 400.

A parameter value runs until the next --, so addresses with question marks and ampersands are fine. Leave out the width and height and the browser falls back to its own 300 by 150 pixel frame, so always pass both. The iframe never grows wider than the article, so a 600 pixel map shrinks to fit on a phone.

Lazy loading is on by default: a page with 3 embeds fetches none of them until the reader gets close. For an iframe at the top of the page, change loading="lazy" to loading="eager" in the snippet.

Check that it works

Open an article for editing, paste {tcs snippet.iframe --url=https://example.com/ --width=600 --height=400} into the text, and save it.
Open the article on your site.

The example.com page shows inside a frame 600 pixels wide and 400 pixels tall. Change the tag to --width=100% --height=300, save, and the frame fills the article's width at 300 pixels tall instead.

Some sites refuse to be embedded and show an empty frame instead. That's a setting on their side (an X-Frame-Options or Content-Security-Policy header), not something the snippet can change.

To learn more about HTML snippets, read the HTML snippet docs.

Embed maps, forms, videos and any other page in your Joomla articles with a short tag that takes the address, width and height, using one HTML snippet.

How to add this snippet

Using the shortcode

Check that it works