Best Elementor iFrame Widgets to Add & Use iFrame in WordPress Elementor (2024)

The Problem & Solutions Upfront: So you already know that using iFrame can…

• Help you enhance your website’s functionality
• Improve user experience & average time on the page
• Create more dynamic & interactive websites to keep your visitors engaged

Thus, you want to use iFrame in Elementor.

Unfortunately, there are no widgets/settings offered by Elementor that allow you to add iFrame inside the Elementor post/page.

Hence you might have Googled – “how to add elementor iframe widget” & probably landed on this blog post.

Well, this is the only guide you’ll need to read (yup, read, not skim through 😉) to know everything about using iFrames in WordPress & Elementor.

So without further ado, let’s get into it…

👀 Transparency Note: Methods & steps listed in this blog post may require you to install additional plugins. Also, my blog is reader-supported, hence some of the links to products mentioned are affiliate links (won’t cost you anything extra) & I’ll appreciate it if you use them to purchase the product as those little commissions keep the lights on at my home & sidebars free from third-party ads. Feel free to read the full disclosure here.

What is an iFrame?

An iFrame, short for “inline frame,” is an HTML element that simply allows you to embed content from an external website. 

In simple words, an iFrame creates a small window on a webpage that displays content from another source & it’s often used to display content such as

↪ videos
↪ maps
↪ or social media feeds, within a website.

iFrames are natively supported by WordPress & hence using iFrames in WordPress is pretty quick & easy. Here’s how to do it…

In case you need a visual guide; here's a video that demonstrates how to add iframe in WordPress and Elementor…

Video Guide: How to Add iFrame in WordPress & Elementor!

What are the Methods to Add iFrame in WordPress & Elementor?

Thankfully, there are a couple of methods to add iframes & there are…

• Using HTML Code
• Using Plugin/Addon

Now, let me unwrap both of these methods in a bit detail…

Method 1: Adding iFrame in WordPress & Elementor using HTML Code

One of the most simple ways to add an iFrame in WordPress is to use the “Custom HTML” block inside the Gutenberg editor.

Similarly, you have got an “HTML widget” inside the Elementor editor that you can use & put the code to display the content.

Here’s an example HTML code to put “elementpack.pro” into an iFrame.

<iframe scr=”https://www.elementpack.pro/” height=”400”></iframe>

The above code & attributes shouldn’t scare you as these iFrame attributes explain the stuff…

iFrame attributes:

• Src: The source of the iFrame (URL)
• Height/Width: Height and width to define the size of the iFrame
• Align: Define the alignment of the iFrame within the page (top, left, bottom, right)
• Scrolling: Adds Scrollbar in your iFrame (values include – yes, no, auto)
• Frameborder: Adds border around the iFrame

The problem with adding iFrames using this simple code is its limitations & hence it’s better to use the second method of adding iFrames using a plugin/addon.

Method 2: Adding iFrame in WordPress & Elementor using Plugin (Addon)

Creating more dynamic layouts will require you to add a plugin/addon as it offers more control & better iFrame functionalities.

So, if you want to add iframe in Elementor, you'll need an addon.

Unfortunately, out of a dozen, only a couple of Elementor addons offer iFrame widgets
that you can use inside your Elementor page/post.

You may not like it but that's the truth.

I researched, tried & tested almost all of the popular Elementor addons including
↪ QI Addons, ElementsKit, Essential Addons
↪ Xpro Addons, PowerPack Element, Plus Addons
↪ ElementPack Pro, Ultimate Elementor, Happy Addons

and many more for the iFrame functionalities.

And here's what I found…

My Findings: Out of a dozen Elementor addons, only 2 listed below provide iFrame widgets with advanced functionalities & they are as follows…

Btw, if you’re looking to add iFrame on a non-elementor page, consider using the above code or adding this iFrame plugin.

💡 Pro Tip: Using an plugin will get you just a basic iframe, hence using an addon is the best way as you’ll get more functionalities & widgets.

ElementPack Pro: iFrame Widget

ElementPack developed by BDThemes is one of the most powerful elementor addons. As of writing this post, it has over 100K+ Active Installs & customer ratings of 4.7 out of 5.

With over 285+ Widgets, 300+ ready-made pages & 1900+ ready-made blocks, it’s the leading elementor addon.

It offers an “iFrame Widget” that will allow you to embed…

• Audio
• Video
• Google Maps &
• Almost any website

with additional features of lazy loading, scroll bars, 360-degree view & more customization options.

Dynamic.ooo: iFrame & Remote Content

Another addon that provides a couple of widgets – iFrame & Remote content allows you to dynamically embed every type of content from external sources into your website. It’s simple & basic.

Out of both, the iFrame widget offered by ElementPack comes with a lot more options such as lazy loading, and 360-degree view & hence I recommend using ElementPack’s iFrame widget for adding iFrame in elementor.

Let me show you how to do it…

Step-by-Step Guide: How to Add iFrame in Elementor that Works

Now that you know the available options & the advanced features of iFrame widget, let's put theory into practice with a step-by-step guide on adding an iframe in elementor using ElementPack Pro:

Step 1: Get the ElementPack Pro Addon

To begin, you need to invest in the pro version and download the ElementPack, which includes the iFrame widget along with 280+ widgets, 300+ ready-made pages & 1900+ blocks.

1. Get the ElementPack Pro (with 30% Discount)
   • Click on this special link to visit the ElementPack official site
2. Choose a Plan
   • Select the plan that best suits your needs. The ElementPack plugin is available in various packages, including annual and lifetime options.
     Recommended plan – Business Plan ($99 for 5 sites)
3. Purchase the Addon
   • Click on the Purchase Now button to head over to the checkout page.
   • At the checkout, use coupon code: WELCOME to get 30% discount on all plans.
   • Next up, simply create an account & proceed with the payment.

4. Download the Plugin
   • After purchasing, you will receive the invoice and a download link for the plugin. Download the plugin (zip file) to your computer.

Step 2: Install and Activate the ElementPack for Elementor

Once you download the plugin, install and activate it on your WordPress website.

1. Log in to your WordPress Dashboard
   • Navigate to your WordPress admin area (typically yourwebsite.com/wp-admin).
2. Go to Plugins > Add New:
   • In the left sidebar, hover over “Plugins” and click on “Add New.”

3. Upload the ElementPack Plugin:
   • Click on the “Upload Plugin” button at the top of the page.
   • Click “Choose File” and select the plugin zip file you downloaded earlier.
   • Click “Install Now.”

4. Next up, Activate the Plugin
   • Once the installation is complete, click “Activate Plugin.”

Step 3: Configure ElementPack (Activate iFrame)

1. Access the ElementPack Pro Settings:
   • In your WordPress dashboard, go to “ElementPack” in the left sidebar.
   • Here, you can configure general settings and enable or disable specific widgets.
2. Enable the iFrame Widget:
   • Ensure the iFrame widget is enabled/installed in the settings. If not, toggle it and enable it.

Step 4: Add the iFrame Widget to Your Page

With the ElementPack addon installed and activated,
you can now add an iframe to your page.

1. Edit with Elementor
   • Go to the page where you want to add the iframe and click “Edit with Elementor.”
2. Add a New Section/Container
   • Click the “+” icon to add a new section/container, then select your desired structure.
3. Search for the iFrame Widget
   • Use the search bar & search for “iFrame” widget

4. Drag and Drop the Widget
   • Drag the iFrame widget into the section you created.
5. Configure the iFrame Settings
   • Click on the iFrame widget to open its layout settings. Under the content source, enter the URL of the website or page you want to embed in the iFrame.
     
     Just for demonstration, I've added ElementPack's official URL.
     You can add any website's URL.

Next up, feel free to play around with additional options such as…

• Setting iFrame height or set it to auto-height
• Alignment & Lazyload settings
• Additional settings such as showing or hiding the scroll bar, iFrame device (chrome, desktop, safari, tablet, etc)

Step 5: Publish Your Changes

1. Save Your Page
   • Once satisfied with the iFrame setup, click the “Update” button to save your changes.
2. Preview Your Page
   • Preview the page to ensure the iFrame functions correctly and looks good on different browsers and devices.

And voila, you have successfully added iFrame to your Elementor website 🎉!

By following the 5 simple steps outlined in this guide, you should be able to create an engaging & functional iFrame in WordPress & Elementor.

If in case the iFrame is not working; here's what you can do…

Troubleshoot: Elementor iFrame not working

If you've successfully added the iFrame but it's not working then…

• First and foremost, verify the embed code
• Check Elementor Settings
• See if there's any Plugin Conflicts
• Check for Security & Compatibility issues
• And if nothing works, do the advanced troubleshooting

Let's go through each of the steps…

1. Verify Embed Code:

• Double-check the iframe code: Ensure the URL is accurate and the syntax is correct (no typos, missing quotes, etc.)
• Test the iframe directly: Paste the code into a standalone HTML page and see if it displays correctly. This helps isolate Elementor as the source of the problem.
• HTTPS mismatch: If your site uses HTTPS, ensure the embedded content also uses HTTPS. Mixed content can cause display issues.

2. Elementor Settings

• Refresh Elementor cache: Sometimes cached data can cause glitches. Try clearing Elementor's cache and reloading the page.
• Disable Elementor Pro addons: If you're using other Elementor Pro addons, deactivate them temporarily to see if they conflict with the iframe functionality.
• Check Elementor version: Ensure you're using the latest version of Elementor. Outdated versions might have bugs impacting iframes.

3. Plugin Conflicts

• Deactivate other plugins: Conflicting plugins can sometimes disrupt Elementor's functionality. Deactivate all other plugins except Elementor and see if the iframe works. Reactivate them one by one to identify the culprit.

4. Security & Compatibility

• Iframe blocking: Some websites disallow embedding within iframes due to security concerns. Check if the embedded content has “X-Frame-Options” set to “DENY” or “SAMEORIGIN”.
• Browser compatibility: Test the iframe on different browsers and devices. Some browsers might have stricter security policies that restrict iframe functionality.

5. Advanced Troubleshooting

• Inspect the iframe element: Open the browser's developer tools and inspect the iframe element. Look for any errors or warnings that might indicate the source of the problem.

These are some of the methods by which you can fix an elementor iframe not working issue by yourself.

Remember, the specific solution will depend on the cause of your iframe issue.

By systematically testing and applying these troubleshooting steps,
you should be able to identify and resolve the problem.

Now, before wrapping up, let me share some quick tips on iFrame & answer some of the FAQs…

Tips for Using Elementor iFrames correctly

Here are some tips & best practices for using iFrames in Elementor…

• Security: Consider using iFrames from secured & trustworthy sites (make sure the site you’re embedding has an SSL certificate)
• Performance: Use iFrames sparingly as adding too many iFrames to your website can affect your website’s loading time & performance.
• Responsiveness: Test your iFrames on different devices & browsers to ensure they display correctly on all devices
• Best Settings: You can set Elementor iFrame to Auto Height using ElementPack's iFrame widget as it offers a simple toggle setting for auto-height.
  • To set Elementor iFrame to Full height; you can simply set the <iframe> height & width in VH (viewport height) and VW (viewport width) units to make it cover full screen with a height & width of 100%.
    
    Alternatively, you can use the ElementPack iFrame widget to set full height as it offers height & width settings.

FAQs on Elementor iFrame

Wrapping Up

By now, you should have an iFrame widget setup and working on your Elementor page.

So, will you be using the ElementPack addon or the basic code to add iFrame to Elementor?

Do let me know in the comments below.

Apart from that, if you’ve got any questions, feel free to drop them in the comments & I’ll be more than happy to answer.

Lastly, if you feel this blog post was helpful, then do give it a share on social platforms. I can sense that you’re good at hitting those sharing buttons (especially the Facebook one 😉)