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 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
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 block becomes available in the WordPress block editor.
Step 2: Add the Custom iFrame Block in Gutenberg
Open a page or post
Click Add New or open an existing page. Make sure you are using the Block Editor (Gutenberg).
Add the Custom iFrame block
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.
Step 3: Embed Content in Custom iFrame
Select source type and paste URL
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.
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.
Step 5: Configure Advanced Settings
Advanced settings give you more control over branding, presentation, and behavior.
Watermark (Pro)
Watermark is a Pro feature. It requires Custom iFrame Pro (Starter, Studio, or Agency plan). View pricing - plans start at $29 one-time.
The Watermark feature adds branding on top of the embedded iframe. The watermark appears over the iframe and does not change the original content.
Enable Watermark
Toggle Watermark on. Choose Text or Image. Enter your brand text or upload a logo. Select the watermark position and adjust styling if needed.
Device Frame (Pro)
Device Frame is a Pro feature. It requires Custom iFrame Pro (Starter, Studio, or Agency plan). View pricing - plans start at $29 one-time.
Device Frame displays your embedded content inside a device mockup (desktop, MacBook, tablet, or phone). This helps users understand how content looks across devices.
Enable Device Frame
Toggle Device Frame on. Choose the device type from the dropdown. Adjust the frame size if needed.
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.
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.
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.
For more issues, see iFrame Not Showing.
FAQ
No. The free version supports embedding from 100+ sources. Pro adds Watermarks, Device Frames, Sandbox, Custom Attributes, and advanced platform controls.
Yes. Add multiple Custom iFrame blocks to any page. Each block has its own URL and settings.
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.
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.
Also Available For
Set Up Custom iFrame in Elementor
Guide for the Elementor page builder.
Set Up Custom iFrame in Gutenberg
You are reading this guide.
Related Guides
Last updated today
Built with Documentation.AI