---
title: "Embed Iframes in Joomla - Code Snippets"
description: "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."
url: "https://www.tassos.gr/docs/code-snippets/howto/content-enhancement/embed-iframe"
date: "2026-10-23T01:21:11+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/docs) / [ Code Snippets ](https://www.tassos.gr/docs/code-snippets) / [ How-to Guides ](https://www.tassos.gr/docs/code-snippets/howto) / [ Content Enhancement ](https://www.tassos.gr/docs/code-snippets/howto/content-enhancement)

#  Embed Iframes in Joomla

##  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.

 ![Embed Iframes in Joomla](https://www.tassos.gr/images/2026/10/code-snippets-embed-iframe-html-card.png)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](https://www.tassos.gr/code-snippets).

## [How to add this snippet](#how-to-add-this-snippet)

1. Install [Code Snippets](https://www.tassos.gr/docs/code-snippets/getting-started/how-to-install) if it isn't installed already.
2. Log into your Joomla backend.
3. Go to **Components** → **Tassos Code Snippets**.
4. Click **New**.
5. Enter the title *Iframe*. The title decides the shortcode's name: the snippet named *Iframe* answers to `{tcs snippet.iframe}`.
6. Set **Code Type** to **HTML**.
7. Set **Insertion Method** to **Shortcode**.
8. 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>
    ```
9. Click **Save**. The **Shortcode** field now shows the exact tag to copy.
10. Click **Save & Close**.

## [Using the shortcode](#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](#check-that-it-works)

1. Open an article for editing, paste `{tcs snippet.iframe --url=https://example.com/ --width=600 --height=400}` into the text, and save it.
2. 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](https://www.tassos.gr/docs/code-snippets/types/html).

 Last updated on Oct 15th 2026 18:10