<iframe>

The iframe tag, or Inline Frame element, is used to embed another HTML document within the current HTML document.

Syntax

Best practice is to include the title attribute for the <iframe> so it can be used by screen readers..

<iframe src="https://webdeveloper.com" title="WebDeveloper.com - Serving the #webDeveloper community"></iframe>

Attributes

allow
Designates the <iframe> feature policy.

allowfullscreen
Setting allowfullscreen to true allows full-screen mode to be activated for the <iframe> by calling the requestFullscreen() method.

allowpaymentrequest
Setting allowpaymentrequest to true allows a cross-origin <iframe> to invoke the Payment Request API.

height
Sets the height in pixels of the <iframe> instead of the default 150 pixels.

loading
Utilizing the values eager or lazy, the loading attribute determines if the browser should load the <iframe> immediately or after certain conditions are met.

name
Provides the name of the <iframe>.

referrerpolicy
Determines which referrer information is sent when fetching the <iframe>. Possible values: no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin-when-cross-origin, and unsafe-url.

sandbox
Can be used to add extra restrictions for the content of the <iframe>. Possible values: allow-forms, allow-pointer-lock, w-popups, allow-same-origin, allow-scripts, and allow-top-navigation.

src
Sets the URL address of the document to embed in the <iframe>.

srcdoc
Provides the HTML content of the page shown in the <iframe>.

width
Sets the width in pixels of the <iframe> instead of the default 300 pixels.

Browser Compatibilty

Demos

User-submitted codepen.io examples of <iframe> ↴

@1

See the Pen on CodePen.

reply?

@steime

See the Pen on CodePen.

reply?

Want to Contribute?

Submit a codepen.io link that demonstrates <iframe>: