The IFrame Field

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.

acf-iframe-field-settings

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.

acf-iframe-usage

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.

acf-iframe-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.