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

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

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

## Requirements

- [Custom iFrame Free plugin installed and active](/getting-started/installation)
- 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

<Steps>
  <Step title="Open your page in the block editor" icon="layout" title-type="p">
    Go to the page or post where you want the embed. Click **Edit** to open the Gutenberg block editor.
  </Step>
  <Step title="Add the Custom iFrame block" icon="plus" title-type="p">
    Click the **Add Block** button. Search for **Custom iFrame**. Click the block to add it to the page.
  </Step>
  <Step title="Paste the embed URL" icon="clipboard" title-type="p">
    In the right panel, paste the URL of the content you want to embed into the **Source URL** field.
  </Step>
</Steps>

## Step 2: Add Custom Attributes

<Steps>
  <Step title="Find the Custom Attributes section" icon="code" title-type="p">
    In the block settings panel on the right, scroll to the **Custom Attributes** section. This section appears when Custom iFrame Pro is active.
  </Step>
  <Step title="Add an attribute" icon="plus" title-type="p">
    Click **Add Attribute**. Two fields appear: **Attribute Name** and **Attribute Value**.
  </Step>
  <Step title="Enter the attribute name and value" icon="edit" title-type="p">
    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.
  </Step>
  <Step title="Add more attributes if needed" icon="plus" title-type="p">
    Click **Add Attribute** again to add additional attribute pairs. Each row adds one attribute to the iFrame element.
  </Step>
</Steps>

## Step 3: Publish

<Callout kind="success">
  Click **Update** or **Publish**. Your custom attributes are now applied to the embedded iFrame.
</Callout>

For all block settings, see the [Set Up Custom iFrame in Gutenberg](/getting-started/gutenberg-setup) 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

<ExpandableGroup>
  <Expandable title="Do custom attributes require Custom iFrame Pro?" default-open="false">
    Yes. The Custom Attributes section is a Pro feature. It requires an active Custom iFrame Pro plan (Starter, Studio, or Agency). [View pricing](https://customiframe.com/pricing).
  </Expandable>
  <Expandable title="Can I add multiple attributes to one block?" default-open="false">
    Yes. Click Add Attribute for each attribute you want to add. Each row applies one attribute name-value pair to the iFrame element.
  </Expandable>
  <Expandable title="What is the difference between a boolean attribute and a value attribute?" default-open="false">
    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.
  </Expandable>
  <Expandable title="Will custom attributes override the plugin's default iFrame attributes?" default-open="false">
    Custom attributes add to the existing iFrame attributes. If you enter an attribute that the plugin already sets, the custom value takes precedence.
  </Expandable>
</ExpandableGroup>

---

## Related Guides

- [Set Up Custom iFrame in Gutenberg](/getting-started/gutenberg-setup)
- [Sandbox and Security in Gutenberg](/gutenberg/advanced/iframe-sandbox-security)
- [Auto-Refresh in Gutenberg](/gutenberg/advanced/iframe-auto-refresh)
- [Embed Anything in Gutenberg](/gutenberg/embed-anything)