Custom Attributes in iFrame in Gutenberg

Add custom HTML attributes to the Custom iFrame block in Gutenberg. Grant camera, microphone, fullscreen, and other browser permissions. Pro feature.

Overview

Custom iFrame lets you add custom HTML attributes directly to the iFrame element in Gutenberg. Use this to grant browser permissions, pass data attributes, or control iFrame behavior that standard settings do not cover.

Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.

This is a Pro feature. It requires Custom iFrame Pro (Starter, Studio, or Agency plan). View pricing — plans start at $29 one-time.

Requirements

Custom iFrame Free plugin installed and active
Custom iFrame Pro plugin installed and active
WordPress with the Gutenberg block editor

When to Use Custom Attributes

iFrame attributes control how the browser handles the embedded content. Common use cases:

Camera or microphone access: allow="camera; microphone" for video calls or voice tools
Full-screen support: allowfullscreen for video players or presentation tools
Payment handling: allow="payment" for embedded checkout flows
Geolocation access: allow="geolocation" for map or location-based tools
Custom data attributes: data-custom="value" for JavaScript targeting

Step 1: Add the Custom iFrame Block

Open your page in the block editor

Go to the page or post where you want the embed. Click Edit to open the Gutenberg block editor.

Add the Custom iFrame block

Click the Add Block button. Search for Custom iFrame. Click the block to add it to the page.

Paste the embed URL

In the right panel, paste the URL of the content you want to embed into the Source URL field.

Step 2: Add Custom Attributes

Find the Custom Attributes section

In the block settings panel on the right, scroll to the Custom Attributes section. This section appears when Custom iFrame Pro is active.

Add an attribute

Click Add Attribute. Two fields appear: Attribute Name and Attribute Value.

Enter the attribute name and value

Enter the attribute name in the first field (for example: allow). Enter the value in the second field (for example: camera; microphone).

For boolean attributes like allowfullscreen, enter the attribute name and leave the value blank.

Add more attributes if needed

Click Add Attribute again to add additional attribute pairs. Each row adds one attribute to the iFrame element.

Step 3: Publish

Click Update or Publish. Your custom attributes are now applied to the embedded iFrame.

For all block settings, see the Set Up Custom iFrame in Gutenberg guide.

This guide showed you how to add custom HTML attributes to the iFrame block in Gutenberg using Custom iFrame Pro. From finding the Custom Attributes section to entering attribute pairs and publishing, the whole setup runs through the block editor.

Common Attribute Examples

Attribute Name	Attribute Value	Purpose
`allow`	`camera; microphone`	Enable camera and mic for video calls
`allow`	`fullscreen`	Allow fullscreen mode
`allow`	`payment`	Enable payment requests
`allow`	`geolocation`	Allow location access
`allowfullscreen`	(leave blank)	Legacy fullscreen support
`loading`	`lazy`	Native lazy loading

FAQ

Yes. The Custom Attributes section is a Pro feature. It requires an active Custom iFrame Pro plan (Starter, Studio, or Agency). View pricing.

Yes. Click Add Attribute for each attribute you want to add. Each row applies one attribute name-value pair to the iFrame element.

Boolean attributes like allowfullscreen just need to be present. Enter the attribute name and leave the value blank. Value attributes like allow="camera" need both a name and a value.

Custom attributes add to the existing iFrame attributes. If you enter an attribute that the plugin already sets, the custom value takes precedence.

Was this page helpful?

Last updated today

Built with Documentation.AI