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.

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

Open your page in Elementor

Go to your WordPress dashboard. Open the page where you want the embed. Click Edit with Elementor.

Add the Custom iFrame widget

In the Elementor widget panel, search for Custom iFrame. Drag the widget into your page layout.

Paste the embed URL

In the Content tab on the left 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 widget panel, go to the Content tab. Scroll down 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 widget settings, see the Set Up Custom iFrame in Elementor 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

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