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

Add custom HTML attributes to the Custom iFrame widget in Elementor. 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 Elementor. 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.

Using Gutenberg? See [Custom Attributes in iFrame in Gutenberg](/gutenberg/advanced/iframe-custom-attributes).

<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
- Elementor Free or Pro installed

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

<Steps>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to your WordPress dashboard. Open the page where you want the embed. Click **Edit with Elementor**.
  </Step>
  <Step title="Add the Custom iFrame widget" icon="search" title-type="p">
    In the Elementor widget panel, search for **Custom iFrame**. Drag the widget into your page layout.
  </Step>
  <Step title="Paste the embed URL" icon="clipboard" title-type="p">
    In the **Content** tab on the left 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 widget panel, go to the **Content** tab. Scroll down 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 widget settings, see the [Set Up Custom iFrame in Elementor](/getting-started/elementor-setup) guide.

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

## 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 widget?" 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 Elementor](/getting-started/elementor-setup)
- [Sandbox and Security in iFrame in Elementor](/elementor/advanced/iframe-sandbox-security)
- [Auto Refresh in iFrame in Elementor](/elementor/advanced/iframe-auto-refresh)
- [Custom Attributes in iFrame in Gutenberg](/gutenberg/advanced/iframe-custom-attributes)
- [Embed in Elementor](/elementor/embed-anything)