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>
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.
User-submitted codepen.io examples of <iframe>
↴
Submit a codepen.io link that demonstrates <iframe>
: