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

If you want to embed external content in your website & looking for
↪ how to add iframe in wordpress elementor or
↪ the best elementor iframe widgets or any related query,

I can assure you; this is the only blog post you’ll need to read.

And by the end of this post, you’ll know…

So without a further ado, let’s dive in…

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.

And the good part about iframes is that they…

• Helps to 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 allows you to directly add iFrame inside the Elementor post/page.

But no worries, third-party plugins are always there to save your a**.

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

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
↪ Element Pack Pro, Ultimate Elementor, Happy Addons

and many more for the iFrame functionalities.

And here's what I found…

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

Just know that Using an plugin will get you a basic iframe, hence
using an addon is the best way as you’ll get more functionalities & widgets inside Elementor.

Element Pack Pro: iFrame Widget

Element Pack 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's special one as 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, if you ask me which is the Best Elementor iframe plugin?
My answer would be; the iFrame widget offered by Element Pack.

Why?

As it comes with a lot more options such as lazy loading, and 360-degree view & hence
I recommend using Element Pack’s iFrame widget for adding iFrame in Elementor.

Let me show you how to use 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 Element Pack Pro:

Step 1: Click on this special link & download the Element Pack Pro (for iFrame Widget)

Quick Note: This exclusive coupon: KULDEEP30 will Save you 30% on all pro plans!

Step 2: Install & Activate the Element Pack Pro Addon

Step 3: Activate the iFrame Widget from the ElementPack’s Core Widget Settings

1. Access the Element Pack Pro Settings:
   • In your WordPress dashboard, go to “ElementPack” in the left sidebar.
   • Under the Core Widgets, 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 Element Pack addon installed and activated,
you can now add an iframe to your page.

1. Go to the page where you want to add the iframe and click “Edit with Elementor.”
2. Click the “+” icon to add a new section/container, then select your desired structure.
3. Use the search bar & search for “iFrame” widget
4. Drag the iFrame widget into the section you created.

Step 5: Publish Your iFrame Page

• Once satisfied with the iFrame setup, click the “Update” button to save your changes.
• Preview the page to ensure the iFrame functions correctly and looks good on different browsers and devices & then hit publish.

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

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!

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 iFrame correctly

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

• Security: Consider using iFrame's from secured & trustworthy sites (make sure the site you’re embedding has an SSL certificate)
• Performance: Use iFrame's sparingly as adding too many iFrame's to your website can affect your website’s loading time & performance.
• Responsiveness: This one is pretty obvious. Make sure to test your iFrame's on different devices & browsers to ensure they display correctly on all devices
• Best Settings: You can set Elementor iFrame to Auto Height using Element Pack'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 Element Pack iFrame widget to
    set full height as it offers height & width settings.

FAQs on Elementor iFrame

Wrapping Up

By now, you should be able to set up an iframe widget on your Elementor page.

I know it may take some time to implement iframe, but if any of the methods did work,
can you please comment below so that fellow Elementor folks know that this content piece is not outdated?

Although I’ve added all the useful information I know about iframe, still I think you must give it a read.

• Log Rocket’s Ultimate Guide to iFrame covers the methods for ensuring iframe security, introduces iframe alternatives such as using Fetch API & much more. A must read to know the ins & outs of using iFrame securely.

Lastly, here’s a small request.

If you found this blog post helpful, a comment along with a social share
will encourage me to write more & write better.

I know you’ll do it as you’re good at hitting those share buttons.

Cheers,
Kuldeep – Your Elementor Guy