How to Add an IFRAME in a Joomla 3.x Article

Do you have the following question?

How can I add an IFRAME to a Joomla Article?

If you have the above question and wish to know the answer, you are in the right place. Here in this tutorial I am giving you the step by step instructions so you can easily able to add any IFRAME content in the body section of your Joomla article. Here I am used Joomla 3.1 as reference. But this tutorial is also valid for Joomla 2.5 and all upcoming release of Joomla 3.x.

By default Joomla uses one editor called “TinyMCE“. In default configuration setting of Joomla 2.5 & Joomla 3.x the IFRAME content is not allowed in the article body. If you put some IFRAME code in the editor (i.e. “TinyMCE editor”), the editor automatically strips those codes form the content. So by default you can not able to save your IFRAME code in the article body.

Now, if you make some small changes in some configuration in Joomla Admin panel then you can overcome this restriction. Basically there are 2 sections in admin panel where you need to change some settings.

The First section is “The settings page of your Joomla Editor” where you need to restrict the editor so it will not strip or remove the IFRAME code . The editor settings page is varies from editor to editor. As the default editor of Joomla is “TinyMCE editor“, here I am listing the steps for that editor only. If you are using some other editor then check the configuration by your own. If you need any help just comment in this article and I will surely help you.

The Second section is “The ‘Text Filters’ section of Global Configuration” where you need to allow one or more user group so they can able to add some blocked HTML codes like IFRAME. I personally recommend you to allow this option to only the ‘Super Users‘ group.

Quick Note: Although the below steps are shown for Joomla 3.1, you can use the same steps in any Joomla 2.5 and Joomla 3.x website or may be in the higher version.

Steps to “Allow IFRAME in the TinyMCE Editor”:

Step 1: Login to your Joomla Admin Panel.

Step 2: Go to “Extensions” => “Plug-in Manager” from the top menu.  (As shown in below picture).

j3 Iframe in article pic 2
Step 2: Click to Enlarge

Step 3: On the Plug-in Manager page you can find one drop-down “Filter” option called  “Select Type“. From the drop-down list choose “editors“. (As shown in below picture).

j3 Iframe in article pic 1
Step 3: Click to Enlarge

Step 4: Now the Plug-in Manager page will list all available editors. From the list click on the “Editor – TinyMCE“. (As shown in below picture.)

j3 Iframe in article pic 3
Step 4: Click to Enlarge

Step 5: Now on the edit page go to “Basic Options” tab. Under the “Basic Options“, almost at the bottom, you can find one option called “Prohibited Elements“. You can see “iframe” is listed here. Remove “iframe” from that field. Then click on the “Save & Close” button at the top to save your changes and close the edit section. (Check the below picture for better reference.)

j3 Iframe in article pic 5
Step 5: Click to Enlarge

That’s all for the “TinyMCE Editor” settings. Now your editor is configured so it will not remove the IFRAME code.

Steps to “Allow IFRAME in the Global Configuration”:

Step 1: If you logged off from admin panel of Joomla then please login again.

Step 2: Go to “System” => “Global Configuration” from the top menu. (As shown in below picture.)

j3 Iframe in article pic 6
Step 2: Click to Enlarge

Step 3: Now on the Global Configuration page, click on the “Text Filters” tab. Under the “Text Filter Settings“, set “Filter Type” to “No Filtering” for the “Super Users” user group. Then click on “Save & Close” button at the top to save the changed settings. (Check the below picture for better reference.)

j3 Iframe in article pic 7
Step 3: Click to Enlarge

That’s all for the “Global Configuration Settings“. Now the Global Text Filters also ready to allow the IFRAME code for “Super Users“. I personally recommend you to allow this option to only for “Super Users” user group. But if you need it for some other groups then you are fine to do the same for those groups also.

If you face any kind of problem to set the above options, feel free to ask your question using the below comment form. I will surely try to help you as soon as possible.

Share the love:

Disclosure: Some of our articles may contain affiliate links; this means each time you make a purchase, we get a small commission. However, the input we produce is reliable; we always handpick and review all information before publishing it on our website. We can ensure you will always get genuine as well as valuable knowledge and resources.

Related Articles You May Like

Article Published by Souvik

SouvikWeb Developer & SEO Specialist with 15+ years of experience in Open Source Web Development specialized in Joomla & WordPress development. He is also the moderator of this blog "RS Web Solutions".

Leave a Comment

22 thoughts on “How to Add an IFRAME in a Joomla 3.x Article

  1. I had the same issue as Bill Cory in that I could not add after doing what you said. I found the issue was that TinyMCE had three sets of settings (Set 0, Set 1, and set 2). I was making the changes to Set 2 but I needed to make the change to Set 0 which is the one that the Super User was assigned to.

    • Are you using the “TinyMCE editor” as your main editor? Please check it once. Otherwise, you need to do these steps for the editor you are currently using. The setting may vary editor-to-editor.

  2. Tried this. Not working with TinyMCE nor JCE with Joom 3. All global settings correct. This is no working. How can this be so difficult.

    • It should work. Just follow all mentioned steps. Also remember, do not paste the iframe code directly on the content screen of the editor. Click “HTML” or “View Source” on your editor (or use Toggle Editor button) and paste the code there.

  3. When I past my html tags into the joomla article it identify it as paragraph every time please help me to overcome from this problem?

    • The TinyMCE editor can be configured a way so the new line created either using <p> element or <br> element. You can try the following:

      1) Go to “Joomla Admin” => “Extensions” => “Plugin Manager”.
      2) Edit the plugin called “Editor – TinyMCE”.
      3) You will see one option called “New Lines”. Either choose “P Element” or choose “BR Element”.

  4. A lot of us don’t use TinyMCE – we use JCE instead. (There are a *lot* of very good reasons for this). What is your advice there? And swapping editors isn;t realistic – we can’t expect our clients to be toggling editors.

    • JCE is a really nice editor and you can surely use it in your client’s website. It is much more feature rich than TinyMCE. But you know, still most of Joomla users always use it’s default editor (i.e. TinyMCE).

  5. Hi

    I have joomla 3.3.3, and as far as I can see, the settings in TinyMCE and Global configuration should allow html-tags, but when I insert html-tags, they are stripped, when I save.

    TinyMCE: only script,applet,iframe are not allowed
    Global configuration: no text filter for super user

    Can you help me?

    Regards, Henrik

    • Your configuration is just fine. There is no reason for your editor to strip html tags (except script,applet,iframe).

      Try one thing, after inserting your html content in the editor, before saving the article, just click on the “Toggle Editor” button for 1 or 2 times. Then save your article. This may work.

  6. Using JCE editor, I have problems, Tiny works fine. I had all these settings correct, yet when I toggle to WYSIWYG editor the disappears. If I go back to code editor it is gone. Using joomla 3.3.3 .

  7. Hi,
    I try to do the same with JCE Editor (2.3.4). Could you tell the right method ?

    Have a nice day


  8. I already have this issue,now i add iframe in joomla article with the help this tutorial,thanks for this info.