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

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.

@steime

See the Pen on CodePen.

Want to Contribute?

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

to submit a demo.
HTML
×

Success!

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,
)...