The "IFrame" custom field gives you the ability to embed another document within the current page.
Field Settings
The "IFrame" custom field provides you the way to set a URL in the frame which will be displayed at your frontend.
As you can see from the screenshot above, after choosing the correct Type, you can set the height, scrollbars, HTML attributes and load the iframe synchronously or asynchronously.
Let's see what each option does.
| Name | Description |
|---|---|
| Name | The name will be used to identify the field. Leave this blank and Joomla will fill in a default value from the title. |
| Label | The label of the field to display. |
| Description | A description of the field that will be displayed in the label tooltip. |
| Required | Is this a mandatory field? |
| Height | Set the height of the iframe. |
| Scrollbars | Set whether to have automatic scrollbars based on content, no scrollbars or always have scrollbars. |
| HTML Attributes | Set custom HTML attributes to be applied on the iframe. |
| Load Async | Select the way to load the iframe, asynchronously(Yes) after the page has fully loaded or synchronously(No). |
Usage
Once you are in your Article's Edit screen, choose the "Fields" Tab to see the IFrame custom field as you can see in the screenshot below.
In this textbox you can type in the URL that the iframe will load.
Frontend Display
Take a look at the screenshot below to see how it could be displayed in your frontend.
Notes
It should be noted that a website can be configured so that they are not allowed to be viewed through an iframe from a different website. In this case the iframe will load a blank page.
It should also be noted that some popular browsers disallow the loading of iframes which contain non-HTTPS content on webpages which are under HTTPS. This policy is called Mixed Content Blocking and has been the norm since at least 2013.
