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 post 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 (free or paid).
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!
2 Methods to Add iFrame in WordPress & Elementor
Adding iFrame in WordPress & Elementor using 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…
- 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.
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.
If you’re looking to add iFrame on a non-elementor page, consider using the above code or adding this iFrame plugin.
💡 Pro Tip: If you wanna add an iframe to an elementor page, then using an addon is the best way as you’ll get more functionalities & widgets.
Unfortunately, out of a dozen, only a couple of Elementor addons offer iFrame widgets that you can use inside your Elementor page/post.
I researched, tried & tested almost all of the popular Elementor addons which include QI Addons, ElementsKit, Essential Addons, ElementsPack Pro, Ultimate Elementor, Happy Addons, Xpro Addons, PowerPack Element, Plus Addons & many more for the iFrame functionalities.
My Findings: Out of a dozen Elementor addons, only 2 listed below provide iFrame widgets & advanced functionalities & they are as follows…
ElementPack developed by BDThemes is one of the most powerful elementor addons. As of writing this post, it has over 80K+ Active Installs & customer ratings of 4.7 out of 5.
With over 240+ 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 & 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. Here's how to do it…
Step-by-Step Guide on How to Add iFrame in Elementor
Step 1: Download, Install & Activate ElementPack
ElemetPack is a powerful elementor addon that comes with over 240+ widgets, 300+ ready-made pages & 1900+ Ready-made blocks along with dynamic carousels, confetti effects, advanced iFrames & visibility controls.
Step 2: Get Inside the Elementor Editor
Once you’ve installed & activated the ElementPack plugin, create a new page/post, give your page a title & then click on Edit with Elementor button
Step 3: Add an iFrame Widget
Once you’re inside the elementor editor, search for iFrame in the search bar over the widgets panel & drag & drop the “iFrame widget” to the canvas.
Step 4: Configure the iFrame Widget
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 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: Save and publish your Page to see the iFrame in Action
Once you’ve configured the iFrame widget, save & publish your page.
See your page live & check if the iFrame is working fine or not. Make sure to test it on different browsers & devices as well. That's it!
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…
Troubleshooting Elementor iFrame not working
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.
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…
- Consider using iFrames from secured & trustworthy sites (make sure the site you’re embedding has an SSL certificate)
- Use iFrames sparingly as adding too many iFrames to your website can affect your website’s loading time & performance.
- Test your iFrames on different devices & browsers to ensure they display correctly on all devices
- 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 fullscreen 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
Does Elementor support iframe?
Yes, Elementor does support iFrames as WordPress itself natively supports iFrame & hence it's easy to use iFrame in WordPress.
Is Elementor iFrame compatible with all browsers?
Yes, Elementor iFrame is compatible with all major browsers, including Google Chrome, Microsoft Edge, Firefox & Safari.
Will embedding external content affect my website’s loading time?
Yes, embedding external content can somewhat slow down your website’s loading time, hence it’s important to be careful about what you embed & how you embed it.
Can I embed any type of content using Elementor iFrame?
Generally, Yes, you can embed any type of content. However, some websites may have restrictions on embedding their content & hence not all embedded content will work.
Can I customize the appearance of my iFrame?
Yes, you can customize the height & width of your iFrame as well as add a border to it using ElementPack’s iFrame widget.
Which is the Best Elementor iFrame Widget?
ElementPack’s iFrame widget is the best elementor iframe widget, as it comes with additional features such as lazy loading, alignment, device settings, and styling options.
Can I use Elementor iFrame to embed videos?
Yes, you can use Elementor iFrame to embed videos from any external websites such as YouTube, Vimeo, etc.
For more advanced options & performance, you can use ElementPack's iFrame widget for embedding YouTube & other videos.
By now, you should have an iFrame widget working on your Elementor page as you have all the necessary information.
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 😉)