> 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 Gutenberg

Step-by-step guide to set up Custom iFrame in Gutenberg using the Custom iFrame WordPress plugin. No coding required.


## Overview

Custom iFrame lets you set up Custom iFrame in Gutenberg by adding a block to 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 Elementor instead? Follow the [Set Up Custom iFrame in Elementor](/getting-started/elementor-setup) guide.

## Requirements

- WordPress 5.8 or higher
- PHP 7.4 or higher
- WordPress Block Editor (Gutenberg) enabled
- 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**.
  </Step>
</Steps>

Once activated, the Custom iFrame block becomes available in the WordPress block editor.

## Step 2: Add the Custom iFrame Block in Gutenberg

<Steps>
  <Step title="Open a page or post" icon="file-text" title-type="p">
    Click **Add New** or open an existing page. Make sure you are using the **Block Editor (Gutenberg)**.
  </Step>
  <Step title="Add the Custom iFrame block" icon="plus-square" title-type="p">
    Click the **+ Add Block** button. Search for **Custom iFrame** and select the **Custom iFrame** block.

    The block appears in the editor. This block replaces the need for manual iframe code.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867167/getting-started/gutenberg-setup/CiFGAdd.webp"
      alt="WordPress Gutenberg editor showing block search for Custom iFrame and the block insertion option on a sample page"
      width="1024"
      height="457" priority={true} fetchPriority="high" />
  </Step>
</Steps>

## Step 3: Embed Content in Custom iFrame

<Steps>
  <Step title="Select source type and paste URL" icon="link" title-type="p">
    In the block settings panel on the right, select the **source type** that matches your content (Default, PDF, X, YouTube, or Vimeo).

    In the **Source URL** field, paste your content URL. The content loads inside the block immediately.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867169/getting-started/gutenberg-setup/CiFG-Embed.webp"
      alt="Custom iFrame block settings in Gutenberg showing source type dropdown and URL input field with content loading"
      width="333"
      height="490" priority={true} fetchPriority="high" />
  </Step>
</Steps>

## Step 4: Configure Basic Settings

Once the URL is added, adjust these settings to match your content and layout:

**Height:** Set the iframe height based on your content and page design.

**Scroll Bar:** Enable or disable the scrollbar inside the embedded content.

**Refresh Interval (Seconds):** Define how often the iframe refreshes. Use this for dashboards or live data that updates in real time.

**Smart Load:** Enable lazy loading. The iframe loads only when it enters the visitor's viewport.

<Image
  src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867171/getting-started/gutenberg-setup/CiFG-Basic.webp"
  alt="Custom iFrame block basic settings panel in Gutenberg showing height, scroll bar, refresh interval, and smart load controls"
  width="329"
  height="639"
/>

## Step 5: Configure Advanced Settings

Advanced settings give you more control over branding, presentation, and behavior.

### Watermark (Pro)

<Callout kind="info">
  Watermark 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>

The Watermark feature adds branding on top of the embedded iframe. The watermark appears over the iframe and does not change the original content.

<Steps>
  <Step title="Enable Watermark" icon="tag" title-type="p">
    Toggle **Watermark** on. Choose **Text** or **Image**. Enter your brand text or upload a logo. Select the watermark position and adjust styling if needed.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867173/getting-started/gutenberg-setup/CiFG-Watermark.webp"
      alt="Custom iFrame Watermark settings in Gutenberg showing enable toggle, type selection, text input, and bottom-right position option"
      width="328"
      height="385"
    />
  </Step>
</Steps>

### Device Frame (Pro)

<Callout kind="info">
  Device Frame 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>

Device Frame displays your embedded content inside a device mockup (desktop, MacBook, tablet, or phone). This helps users understand how content looks across devices.

<Steps>
  <Step title="Enable Device Frame" icon="monitor" title-type="p">
    Toggle **Device Frame** on. Choose the device type from the dropdown. Adjust the frame size if needed.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867174/getting-started/gutenberg-setup/CiFG-Device.webp"
      alt="Custom iFrame Device Frame settings in Gutenberg showing toggle enabled and dropdown with Desktop, MacBook, Tablet, and Phone options"
      width="335"
      height="319"
    />
  </Step>
</Steps>

## Step 6: Configure Style Settings

Use the Style tab to control spacing, alignment, and visual design.

**Padding:** Control the space between the iframe and its container using px, em, or %. Enable **Link Values** to apply the same padding on all sides at once.

**Alignment:** Align the iframe left, center, or right.

**Width:** Set the iframe width using px, %, or vw.

**Border:** Customize border style, width, color, and radius for rounded corners.

**Box Shadow:** Add depth with shadow effects. Adjust color, position, blur, spread, and choose between outline or inset shadows.

<Image
  src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867176/getting-started/gutenberg-setup/CiFG-Style.webp"
  alt="Custom iFrame Style tab in Gutenberg showing expandable sections for background, border, box shadow, and advanced styling options"
  width="347"
  height="587"
/>

## Step 7: Configure Advanced Settings

Advanced settings control iframe behavior, security, and customization.

**Custom ID:** Add a unique ID to the iframe for custom styling, tracking, or JavaScript targeting.

**Enable Sandbox:** Restrict what the embedded content can do. This improves security when embedding third-party content.

**Sandbox Options:** Define specific permissions for the sandbox by adding allowed options separated with commas. Allow only what the embedded content actually needs.

**Custom Attributes:** Add extra iframe attributes using key-value format. Useful for accessibility, SEO hints, or custom iframe behavior.

<Image
  src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867178/getting-started/gutenberg-setup/CiFG-Advanced.webp"
  alt="Custom iFrame Advanced settings panel in Gutenberg showing Custom ID field, Enable Sandbox toggle, and Custom Attributes input"
  width="328"
  height="697"
/>

Click **Save** 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.

**Watermark or Device Frame not visible:** Check that your plan includes Pro features. [View pricing](https://customiframe.com/pricing).

For more issues, see [iFrame Not Showing](/troubleshooting/iframe-not-showing).

## FAQ

<ExpandableGroup>
  <Expandable title="Do I need Custom iFrame Pro to embed content in Gutenberg?" default-open="false">
    No. The free version supports embedding from 100+ sources. Pro adds Watermarks, Device Frames, Sandbox, Custom Attributes, and advanced platform controls.
  </Expandable>
  <Expandable title="Can I embed multiple iframes on the same Gutenberg page?" default-open="false">
    Yes. Add multiple Custom iFrame blocks to any page. Each block has its own URL and settings.
  </Expandable>
  <Expandable title="What is the difference between the Elementor widget and the Gutenberg block?" default-open="false">
    Both use the same Custom iFrame plugin. The Elementor widget works inside the Elementor page builder. The Gutenberg block works inside the native WordPress block editor. The settings and features are the same.
  </Expandable>
  <Expandable title="Why does my embed not load in Gutenberg?" default-open="false">
    The source site may block embedding. Check that the URL is publicly accessible and that the site allows iframe embeds. Some platforms like Facebook restrict embedding by default.
  </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}>
    Guide for the Elementor page builder.
  </Card>
  <Card title="Set Up Custom iFrame in Gutenberg" href="/getting-started/gutenberg-setup" icon="layout" horizontal={false}>
    You are reading this guide.
  </Card>
</Columns>

## Related Guides

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