/    Sign up×
Reference /Pin to ProfileBookmark

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


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>


Designates the <iframe> feature policy.

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

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

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

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

Provides the name of the <iframe>.

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.

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.

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

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

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

Browser Compatibilty


User-submitted codepen.io examples of <iframe>


See the Pen on CodePen.


See the Pen on CodePen.

Want to Contribute?

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

to submit a demo.


Help @reference spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ

legal: ({
terms: of use,
privacy: policy
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,