> For the complete documentation index, see [llms.txt](https://docs.customiframe.com/llms.txt).
> Use it to discover all available pages before exploring further.

# 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](/getting-started/gutenberg-setup) 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

<Steps>
  <Step title="Go to Plugins" icon="package" title-type="p">
    In your WordPress dashboard, go to **Plugins** → **Add New**.
  </Step>
  <Step title="Search and install" icon="search" title-type="p">
    Type **Custom iFrame by Coderz Studio** in the search bar. Click **Install Now**, then click **Activate**.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867147/getting-started/elementor-setup/Custom-iFrame-Installation.webp"
      alt="WordPress Plugins screen showing Custom iFrame by CoderzStudio search result with Install Now button"
      width="1024"
      height="396" priority={true} fetchPriority="high" />
  </Step>
</Steps>

Once activated, the Custom iFrame widget appears in your Elementor widget panel.

## Step 2: Add the Custom iFrame Widget in Elementor

<Steps>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to the page or post where you want to embed content. Click **Edit with Elementor**.
  </Step>
  <Step title="Find and drag the widget" icon="move" title-type="p">
    In the Elementor left panel, search for **Custom iFrame**. Drag the widget into the section where you want the embed to appear.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867149/getting-started/elementor-setup/Guide-Add-Custom-iFrame.webp"
      alt="Elementor editor showing Custom iFrame widget being dragged from the left panel into a page section"
      width="1024"
      height="337" priority={true} fetchPriority="high" />
  </Step>
</Steps>

## Step 3: Set Up Custom iFrame in Elementor

With the widget selected, configure these Content settings:

<Steps>
  <Step title="Paste your embed URL" icon="link" title-type="p">
    In the **Content Source (URL)** field, paste the URL of the content you want to embed. The embed loads in the editor immediately.
  </Step>
  <Step title="Set height and display options" icon="sliders" title-type="p">
    **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.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867151/getting-started/elementor-setup/Custom-iFrame-Content-Settings.webp"
      alt="Custom iFrame widget Content tab in Elementor showing URL field, height, auto height toggle, scrollbar control, and refresh interval"
      width="374"
      height="806"
    />
  </Step>
</Steps>

## 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.

<Steps>
  <Step title="Enable Lazy Load" icon="zap" title-type="p">
    In the Content tab, toggle **Lazy Load** to **Yes**.
  </Step>
  <Step title="Upload a placeholder image" icon="image" title-type="p">
    Upload a placeholder image. This image shows in the iframe area while the content loads, rather than a blank space.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867152/getting-started/elementor-setup/CiF-Smart-Load.webp"
      alt="Custom iFrame Smart Load section in Elementor showing Lazy Load toggle set to Yes and placeholder image upload area"
      width="373"
      height="345"
    />
  </Step>
</Steps>

## Step 5: Enable Sandbox for Secure Embeds

<Callout kind="info">
  Sandbox is a Pro feature. It requires Custom iFrame Pro (Starter, Studio, or Agency plan).
  [View pricing](https://customiframe.com/pricing) - plans start at $29 one-time.
</Callout>

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.

<Steps>
  <Step title="Toggle Enable Sandbox to Yes" icon="shield" title-type="p">
    In the Content tab, find the **Sandbox** section. Toggle **Enable Sandbox** to **Yes**.
  </Step>
  <Step title="Select permissions" icon="check-square" title-type="p">
    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

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867154/getting-started/elementor-setup/Sandbox-Options.webp"
      alt="Custom iFrame Pro Sandbox settings in Elementor showing Enable Sandbox toggle and permission checkboxes for Allow Forms, Allow Scripts, and Allow Same Origin"
      width="358"
      height="407"
    />
  </Step>
</Steps>

<Callout kind="alert">
  Grant only the permissions your embed actually needs. Fewer permissions keeps your site more secure.
</Callout>

## 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)

<Callout kind="info">
  Custom Attributes is a Pro feature. It requires Custom iFrame Pro (Starter, Studio, or Agency plan).
  [View pricing](https://customiframe.com/pricing) - plans start at $29 one-time.
</Callout>

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`

<Image
  src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867156/getting-started/elementor-setup/Custom-ID-Attributes.webp"
  alt="Custom iFrame Pro settings in Elementor showing Custom ID field and Attributes input with key|value format example"
  width="366"
  height="387"
/>

## 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.

<Image
  src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867158/getting-started/elementor-setup/Custom-iFrame-Style-Options.webp"
  alt="Custom iFrame Style tab in Elementor showing padding, alignment, and container width controls"
  width="368"
  height="536"
/>

**Border:** Set border type (Solid, Dashed, Dotted, Double, or Groove), width, color, and border radius for rounded corners.

<Image
  src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867160/getting-started/elementor-setup/Custom-iFrame-Border-Style.webp"
  alt="Custom iFrame border settings in Elementor showing type, width, color, and border radius controls"
  width="374"
  height="410"
/>

**Box Shadow:** Add a shadow effect. Adjust color, horizontal and vertical offset, blur, and spread.

<Image
  src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867162/getting-started/elementor-setup/Custom-iFrame-Box-Shadow-Style.webp"
  alt="Custom iFrame box shadow settings in Elementor showing color picker, horizontal, vertical, blur, and spread controls"
  width="372"
  height="494"
/>

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](/troubleshooting/iframe-not-showing).

## FAQ

<ExpandableGroup>
  <Expandable title="Do I need Custom iFrame Pro to embed basic content?" default-open="false">
    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.
  </Expandable>
  <Expandable title="Can I embed multiple iframes on the same page?" default-open="false">
    Yes. Add multiple Custom iFrame widgets to any page. Each widget has its own URL, settings, and Custom ID.
  </Expandable>
  <Expandable title="Why does my iframe show blank?" default-open="false">
    The source site may block embedding. Some sites like Facebook and Instagram restrict iframe embeds via X-Frame-Options or Content-Security-Policy headers.
  </Expandable>
  <Expandable title="What height should I set for my embed?" default-open="false">
    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.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Set Up Custom iFrame in Elementor" href="/getting-started/elementor-setup" icon="layers" horizontal={false}>
    You are reading this guide.
  </Card>
  <Card title="Set Up Custom iFrame in Gutenberg" href="/getting-started/gutenberg-setup" icon="layout" horizontal={false}>
    Guide for the WordPress block editor.
  </Card>
</Columns>

## Related Guides

- [Style Custom iFrame](/getting-started/styling)
- [Embed YouTube in Elementor](/elementor/video/embed-youtube)
- [Embed Google Maps in Elementor](/elementor/google/embed-google-maps)
- [Auto Height Adjustment](/features/auto-height)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)