Want to set up Custom iFrame in Elementor? With this plugin, you can easily embed external content like videos, maps, and third-party tools on your website. This guide will walk you through the simple steps to get started and enhance your site’s functionality.
Not a fan of reading? No worries — we’ve got a video tutorial for you. 📺
Not a video person? No worries — scroll on for the full step-by-step guide.
Step 1: Install and Activate Custom iFrame Plugin
To get started, you need to install and activate Custom iFrame plugin.
Here’s the simple way:
- Go to your WordPress dashboard.
- Navigate to Plugins > Add New.
- In the search bar, type ‘Custom iFrame by Coderz Studio‘ and hit the enter.
- Click Install Now, then click Activate.
Step 2: Add Custom iFrame widget on Elementor Page
Once Custom iFrame plugin is activated:
- Navigate to the page or post where you want to add the Custom iFrame.
- Click Edit with Elementor to launch the Elementor editor.
- In the Elementor editor, look for the Custom iFrame widget. You can find it by searching for “Custom iFrame” in the search bar on the left panel.
- Drag and drop the Custom iFrame widget into the section where you want to display the content.
Step 3: Set Up Custom iFrame in Elementor
Now that the widget is in place, it’s time to configure the Content settings:
Content Source (URL):
Add the URL of the content you want to embed. Whether it’s a YouTube video, a Google Map, or another webpage, simply paste the URL here.
Custom ID:
Assign a unique ID to your iFrame for applying custom CSS or JavaScript. This allows you to style or control the iFrame more efficiently. If left empty, an ID will be automatically generated.
Height:
Adjust the Height of the iFrame to fit your design. You can input exact pixel values (e.g., 600px) or use percentages for a more flexible, responsive design.
Auto Height:
The Auto Height option adjusts the iFrame’s height automatically to fit its content, ensuring a clean and responsive layout. It’s ideal for dynamic content like forms or pages with varying sizes.
Show Scrollbar:
Enable or disable the scrollbar within the iFrame. Use it to allow users to scroll through overflowing content inside the iFrame or hide it for a cleaner look if the content fits perfectly.
Refresh Interval (seconds):
Set a time interval to automatically reload the iFrame content. This is useful for keeping dynamic content like live data, news feeds, or dashboards updated without manual refreshes.
Step 4: Set up the iFrame Smart Load
Smart Load is a feature that helps improve page load times by delaying the loading of the iFrame until it’s about to be visible on the screen.
Enable Lazy Load and select the placeholder Image.
The placeholder image improves user experience by showing a visual cue instead of a blank space while the iFrame content loads.
Step 5: Enable Sandbox for Secure Embeds
The Sandbox option helps you add extra security to your iframes. When you Enable Sandbox, all iframe actions are blocked by default.
You can manually allow only the features you trust. This is especially useful when embedding forms, third-party tools, or interactive content.
How to Use:
- Toggle Enable Sandbox to Yes
- Use the Sandbox Options dropdown to select permissions you want to allow
Available permissions include:
- Allow Forms – Enables form submissions inside the iframe
- Allow Scripts – Allows JavaScript to run in the iframe
- Allow Same Origin – Treats iframe content as from the same origin (needed for some services to work)
- Allow Popups – Allows opening popups or new browser tabs
- Allow Modals – Enables modal dialogs within the iframe
- Allow Orientation Lock – Lets the iframe lock screen orientation (e.g., landscape mode)
- Allow Pointer Lock – Allows the iframe to lock the mouse pointer (used in games or 3D apps)
- Allow Presentation – Supports presentation mode (e.g., slideshows)
- Allow Popups to Escape – Allows popups to escape the iframe boundary
- Allow Top Navigation – Lets the iframe change the top-level browser URL
Step 6: Set Up Custom ID & Attributes
Looking to target your iframe with custom styles or scripts? This section’s for you.
These options let you go beyond the basics and apply your own custom behavior to the iframe element.
Custom ID
Use this field to assign a unique ID to your iframe.
This is helpful when you want to:
- Apply custom CSS
- Target the iframe with JavaScript
- Track it in analytics or A/B testing
If left blank, a unique ID will be auto-generated for you.
Attributes
Want to add advanced functionality or accessibility features?
You can manually add custom HTML attributes to the iframe element.
Each attribute should be added on a new line, using key|value format.
Example:
loading|lazy
referrerpolicy|no-referrer
frameborder|0
aria-label|Embedded Product TourUse cases include:
- Setting
loading|lazyto defer iframe load for better performance - Controlling referrer data with
referrerpolicy - Adding accessibility labels with
aria-*attributes - Overriding default browser behavior or styling
Step 7: Set Up the Style of iFrame
Padding:
The Padding settings let you control the spacing between the iFrame content and its container using px (pixels), em (relative to font size), or % (percentage of the container width) for precise spacing control.
Link Values: By enabling this option, you can apply the same padding value to all sides simultaneously. This saves time when you need consistent spacing around the iFrame.
Alignment:
Choose the alignment of the iFrame within its container—Left, Center, or Right—to match your page layout and design preferences.
Container Width:
Set the width of the iFrame container using px (pixels), % (percentage), or vw (viewport width) to control how it adapts to different screen sizes.
Border Style Set up:
The Border Settings allow you to customize the appearance of the iframe’s border for better design and seamless integration with your website.
- Border Type: Select the style of the border, such as Solid, Dashed, Double, Dotted or Groove, to define how the border should look.
- Border Width: Adjust the thickness of the border in pixels for a bold or subtle effect.
- Border Color: Choose a color that complements your website design using the color picker.
- Border Radius: Add rounded corners to the iFrame by specifying a value in pixels. Higher values create more rounded edges.
Box Shadow Style Set up:
The Box Shadow Settings let you add a shadow effect to your iframe for a more dynamic and visually appealing design.
- Color: Choose the shadow color to match or contrast with your design.
- Horizontal: Adjust the horizontal shadow position. Positive values move the shadow to the right, while negative values move it to the left.
- Vertical: Adjust the vertical shadow position. Positive values move the shadow downward, while negative values move it upward.
- Blur: Set the blur intensity to create a soft or sharp shadow. Higher values result in a more diffused shadow.
- Spread: Control the size of the shadow. Positive values increase the shadow size, while negative values shrink it.
- Position: Choose between:
- Outline: The shadow appears outside the iframe.
- Inset: The shadow appears inside the iframe.
This guide covers everything you need to set up and customize your Custom iFrame plugin in Elementor. From lazy loading to styling, you can optimize performance and design with ease. Configure the options based on your needs to enhance functionality and user experience.
