1. Home
  2. Docs
  3. Content Elements
  4. Iframe

IFrame EA Element

An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website. The IFrame HTML element is often used to insert content from another source, such as an advertisement, into a Web page. Although an IFrame behaves like an inline image, it can be configured with its own scrollbar independent of the surrounding page’s scrollbar. Here in this tutorial, you’re going to learn how to use the IFrame element into Elementor Page Builder. So let’s get straight into it:



If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


How to Customize the IFrame Element





⇒Content Source: Set the content source from here. You can put here any website URL, youtube, Vimeo, document or image embed URL.

⇒Iframe Height: Customize the Iframe height on the page for different dimensions.

⇒Auto Height: Enable auto height. Note that, Auto height only works when cross origin properly set.


Lazyload Settings

⇒Lazyload: Enable lazyloads on your iframe on the page.

: Set the throttle of the iframe. Millisecond interval at which to process events.

: Set the hover

: Enable live to auto bind lazy loading to ajax loaded elements.


Additional Settings

⇒Allow Fullscreen: Enable the fullscreen. Maybe you need this when you use a youtube or video embed link.

⇒Show Scroll Bar: Enable the Scroll Bar to specifies whether or not to display scrollbars.

⇒Sandbox: Enables an extra set of restrictions for the content by turning the Sandbox on.

⇒Sandbox Allowed Attributes: Add sandbox allowed attributes to your iframe.



Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of IFrame Element.

Was this article helpful to you? Yes No

How can we help?