Skip to content
geekerhub

How to Add an iFrame in Elementor and WordPress

By ali 8 min read

How to add an iFrame in Elementor using the HTML widget

Elementor is one of the most popular WordPress page builders. It allows you to create and customize website pages using a visual editor without writing code. You can also use HTML elements such as iFrames to embed external content directly into your website.

An iFrame can be useful when you want to display a map, video, external webpage, booking form, or another supported resource without building that functionality yourself.

In this tutorial, you will learn what an iFrame is, how to add one using Gutenberg and Elementor, and how to configure it for a responsive website.

What Is an iFrame?

An iFrame, or inline frame, is an HTML element that allows you to embed another webpage or document inside your current webpage.

For example, you can use an iFrame to display a Google Map, an external video, or a third-party form on your WordPress website.

The HTML element used to create an iFrame is <iframe>. Its src attribute specifies the URL of the content you want to display.

Here is a basic example:

<iframe
    src="https://www.example.com"
    width="800"
    height="600"
    title="Embedded example webpage"
></iframe>

The browser loads the specified URL inside the frame. However, not every website allows itself to be embedded. Some websites use security policies such as Content Security Policy (CSP) or X-Frame-Options to prevent embedding on other domains.

Common iFrame Attributes

You can use several HTML attributes to control how an iFrame behaves and appears on your webpage.

  • src: Specifies the URL of the webpage or resource to embed.
  • width: Defines the width of the iFrame in pixels or as a percentage.
  • height: Defines the height of the iFrame.
  • title: Provides an accessible description of the embedded content for screen readers.
  • allowfullscreen: Allows supported embedded content to enter fullscreen mode.
  • loading: Controls when the browser loads the iFrame. Use lazy to defer loading until it approaches the visible area.
  • sandbox: Applies additional restrictions to the embedded content.
  • allow: Specifies which browser features, such as fullscreen or camera access, the embedded content may use.
  • name: Assigns a name to the iFrame, which can be used as a browsing context target.

For example, you can use the following code to create an iFrame with a title and lazy loading:

<iframe
    src="https://www.example.com"
    width="800"
    height="600"
    title="Embedded example webpage"
    loading="lazy"
    allowfullscreen
></iframe>

Older attributes such as frameborder and scrolling are obsolete in modern HTML. Use CSS to control borders and layout instead.

How to Add an iFrame in WordPress Gutenberg

If you are using the WordPress Gutenberg editor, you can add an iFrame through the Custom HTML block.

Step 1: Open the WordPress Editor

Log in to your WordPress dashboard and open the page or post where you want to display the embedded content.

Step 2: Add a Custom HTML Block

Click the block inserter (+) button and search for Custom HTML. Select the block and add it to your page.

Step 3: Insert the iFrame Code

Paste your iFrame HTML into the Custom HTML block. Replace the example URL with the URL of the content you want to embed.

<iframe
    src="https://www.example.com"
    width="800"
    height="600"
    title="Embedded webpage"
    loading="lazy"
></iframe>

Step 4: Preview and Publish

Use the block preview or WordPress page preview to check the embedded content. If everything looks correct, update or publish the page.

How to Add an iFrame in Elementor

You do not necessarily need an additional Elementor add-on to embed an iFrame. Elementor provides an HTML widget that allows you to add custom HTML code to a page.

Step 1: Open the Elementor Editor

Log in to your WordPress dashboard and open the page where you want to add the iFrame.

Click Edit with Elementor to launch the Elementor editor.

Step 2: Add the HTML Widget

In the Elementor widgets panel, search for HTML. Drag the HTML widget and drop it into the section or container where you want the embedded content to appear.

Step 3: Insert Your iFrame Code

Click the HTML widget to open its code editor. Paste your iFrame code into the HTML field.

For example:

<iframe
    src="https://www.example.com"
    width="100%"
    height="500"
    title="Embedded example webpage"
    loading="lazy"
    style="border: 0;"
></iframe>

Replace https://www.example.com with the URL you want to embed. Setting the width to 100% allows the iFrame to use the available width of its container.

Step 4: Adjust the Layout

Use Elementor’s layout and style settings to adjust the widget’s position, spacing, and surrounding container. You can also use custom CSS if you need more control over the embedded content’s dimensions.

Step 5: Save and Publish Your Page

Click Update or Publish to save your changes. Open the page on the frontend and check whether the iFrame loads correctly.

Test the page on desktop, tablet, and mobile devices to make sure the embedded content fits the available space.

How to Make an iFrame Responsive

A fixed-width iFrame may not fit properly on smaller screens. To make it responsive, place the iFrame inside a container that controls its aspect ratio.

Here is an example using a responsive 16:9 container:

<div class="responsive-iframe">
    <iframe
        src="https://www.example.com"
        title="Embedded webpage"
        loading="lazy"
        allowfullscreen
    ></iframe>
</div>

Add the following CSS to your theme’s custom CSS area or Elementor custom CSS settings where available:

.responsive-iframe {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.responsive-iframe iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

This approach keeps the iFrame at a 16:9 aspect ratio while adjusting its width to fit the available container space.

Adding an iFrame Using ElementPack

If you need a dedicated iFrame widget with additional configuration options, you can also explore third-party Elementor add-ons such as ElementPack.

ElementPack provides additional widgets for Elementor. Depending on the installed version and license, it may offer an iFrame widget that lets you configure an embedded URL through the visual editor.

Step 1: Install and Activate ElementPack

Visit the official ElementPack Lite plugin page to review the available features and installation instructions.

Install and activate the plugin if its available widgets meet your requirements.

Step 2: Open Your Page in Elementor

Open the page you want to edit and click Edit with Elementor.

Step 3: Find the iFrame Widget

Search for the iFrame widget in the Elementor widgets panel. If the widget is available in your installed ElementPack version, drag it into your page.

Step 4: Configure the Embedded URL

Select the widget and enter the URL of the webpage you want to embed in its content or source field. Adjust the available dimensions and other settings according to your design.

Use a URL from a website that permits embedding. A third-party website may block the request even when the URL is correct.

Step 5: Save and Test

Save your page and preview it on the frontend. Check the embedded content on different screen sizes and browsers.

Common iFrame Problems and How to Fix Them

Sometimes an iFrame does not display as expected. Here are a few common issues to check.

1. The Website Refuses to Load

If the embedded page displays an error or refuses to load, the external website may block embedding through its security headers. You cannot reliably bypass this restriction by changing the iFrame HTML. Contact the website owner or use an official embed option if one is available.

2. The iFrame Is Too Large or Too Small

Check the width and height settings of the iFrame. Use a responsive container with CSS to make it fit different screen sizes.

3. The iFrame Is Not Displaying in Elementor

Check that you have added the code to the correct HTML widget and that the source URL is valid. Also check browser console errors, security settings, and whether a plugin or security rule is interfering with the embedded content.

4. The Embedded Content Is Not Responsive

Use a responsive wrapper and CSS rather than relying only on fixed pixel dimensions. Keep in mind that the content inside a cross-origin iFrame may have its own layout and may not automatically adapt to your website’s container.

Best Practices When Using iFrames

  • Use trusted sources: Only embed content from websites and services you trust.
  • Add a descriptive title: Include a meaningful title attribute for accessibility.
  • Use lazy loading: Consider loading="lazy" for embedded content that is not immediately visible.
  • Make the layout responsive: Use flexible widths and CSS aspect ratios.
  • Use sandbox restrictions carefully: The sandbox attribute can improve isolation, but some embedded features may stop working unless the required permissions are explicitly allowed.
  • Check mobile performance: Large or numerous embedded resources can affect page loading and user experience.
  • Respect embedding restrictions: Do not try to bypass the security policies of websites that prohibit embedding.

Conclusion

Adding an iFrame in Elementor is straightforward. You can use Elementor’s built-in HTML widget to paste your iFrame code, adjust its dimensions, and display external content on your WordPress page.

If you are using Gutenberg, the Custom HTML block provides another simple way to embed an iFrame. For additional visual controls, you can explore compatible Elementor add-ons such as ElementPack.

Remember to use trusted sources, make your iFrame responsive, and test the embedded content across different devices. These practices will help you integrate external content while maintaining a smooth website experience.

Related guides