Set Up Custom iFrame in Elementor
Step-by-step guide to set up Custom iFrame in Elementor using the Custom iFrame WordPress plugin. No coding required.
Overview
Custom iFrame lets you set up Custom iFrame in Elementor by dragging a widget onto any page and pasting a URL to embed external content. No API keys or coding needed.
Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.
Using Gutenberg instead? Follow the Set Up Custom iFrame in Gutenberg guide.
Requirements
- WordPress 5.8 or higher
- PHP 7.4 or higher
- Elementor installed
- Custom iFrame plugin (free version works for most features)
Step 1: Install and Activate Custom iFrame
Go to Plugins
In your WordPress dashboard, go to Plugins → Add New.
Search and install
Type Custom iFrame by Coderz Studio in the search bar. Click Install Now, then click Activate.
Once activated, the Custom iFrame widget appears in your Elementor widget panel.
Step 2: Add the Custom iFrame Widget in Elementor
Open your page in Elementor
Go to the page or post where you want to embed content. Click Edit with Elementor.
Find and drag the widget
In the Elementor left panel, search for Custom iFrame. Drag the widget into the section where you want the embed to appear.
Step 3: Set Up Custom iFrame in Elementor
With the widget selected, configure these Content settings:
Paste your embed URL
In the Content Source (URL) field, paste the URL of the content you want to embed. The embed loads in the editor immediately.
Set height and display options
Height: Set the iframe height in pixels (e.g., 600). For variable-length content, enable Auto Height instead.
Auto Height: Adjusts the iframe height to fit its content. Ideal for forms and documents with varying sizes.
Show Scrollbar: Enable to let users scroll inside the iframe. Disable for a cleaner look when content fits the set height.
Refresh Interval (seconds): Set a time for auto-reload. Use this for live dashboards or data feeds.
Step 4: Set Up Smart Load
Smart Load delays iframe loading until the embed is about to enter the visitor's viewport. This improves page load performance.
Enable Lazy Load
In the Content tab, toggle Lazy Load to Yes.
Upload a placeholder image
Upload a placeholder image. This image shows in the iframe area while the content loads, rather than a blank space.
Step 5: Enable Sandbox for Secure Embeds
Sandbox is a Pro feature. It requires Custom iFrame Pro (Starter, Studio, or Agency plan). View pricing - plans start at $29 one-time.
Sandbox mode restricts what embedded third-party content can do. When enabled, all iframe actions are blocked by default. You grant only the specific permissions your embed requires.
Toggle Enable Sandbox to Yes
In the Content tab, find the Sandbox section. Toggle Enable Sandbox to Yes.
Select permissions
Use Sandbox Options to add permissions your embed needs:
- Allow Forms - enables form submissions
- Allow Scripts - allows JavaScript to run
- Allow Same Origin - needed for some services to function
- Allow Popups - allows popups or new tabs
- Allow Modals - enables modal dialogs
- Allow Orientation Lock - lets the iframe lock screen orientation
- Allow Pointer Lock - allows pointer lock (used in games or 3D apps)
- Allow Presentation - supports presentation mode
Grant only the permissions your embed actually needs. Fewer permissions keeps your site more secure.
Step 6: Set Up Custom ID and Attributes
Custom ID
Assign a unique ID to the iframe for targeting with custom CSS or JavaScript. If left blank, an ID generates automatically.
Custom Attributes (Pro)
Custom Attributes is a Pro feature. It requires Custom iFrame Pro (Starter, Studio, or Agency plan). View pricing - plans start at $29 one-time.
Add custom HTML attributes to the iframe. Enter one attribute per line using key|value format.
Examples: loading|lazy, referrerpolicy|no-referrer, aria-label|Embedded Product Tour
Step 7: Style the iFrame
Open the Style tab to control the visual appearance.
Padding: Set spacing between the iframe and its container using px, em, or %. Enable Link Values to apply the same value to all four sides at once.
Alignment: Align the iframe left, center, or right within the section.
Container Width: Control iframe width using px, %, or vw.
Border: Set border type (Solid, Dashed, Dotted, Double, or Groove), width, color, and border radius for rounded corners.
Box Shadow: Add a shadow effect. Adjust color, horizontal and vertical offset, blur, and spread.
Click Update or Publish. Your embed is live.
Troubleshooting
Iframe shows blank: Confirm the URL is public and the source allows iframe embedding.
Content is cut off: Increase the height value or enable Auto Height.
Sandbox blocks the embed: Check what permissions the content needs and add them in Sandbox Options.
For more issues, see iFrame Not Showing.
FAQ
No. The free version supports embedding from 100+ sources including YouTube, Google Maps, and Spotify. Pro adds Sandbox, Custom Attributes, Watermarks, Device Frames, and advanced platform controls.
Yes. Add multiple Custom iFrame widgets to any page. Each widget has its own URL, settings, and Custom ID.
The source site may block embedding. Some sites like Facebook and Instagram restrict iframe embeds via X-Frame-Options or Content-Security-Policy headers.
YouTube videos work well at 450px. Google Maps at 400px. For forms and documents with variable length, enable Auto Height so the iframe adjusts automatically.
Also Available For
Set Up Custom iFrame in Elementor
You are reading this guide.
Set Up Custom iFrame in Gutenberg
Guide for the WordPress block editor.
Related Guides
Last updated today
Built with Documentation.AI