HTML <iframe> (Inline Frame) Tag
Example
<iframe src="demo.html" title="demo" width="300" height="600" scrolling="auto">
Your browser does not support iframe.
</iframe>Meaning
<iframe> element specifies a floating frame, an independently controllable content region that can be embedded in a page, making it useful for including remote assets and gadgets.
Note: If a browser doesn't support an <iframe> tag, it displays the text within it.
Version: HTML 4, 5
Standard Syntax
<iframe src="URL" width="pixels" height="pixels" scrolling="auto|no|yes">
Sorry, your browser doesn't support inline frames.
<iframe>Browser Support
Status
Attributes
| Attribute | Value | Description |
|---|---|---|
| allow | - | Specifies a feature policy for the <iframe>iframe. The policy defines what features are available to the <iframe> based on the origin of the request. (e.g. access to the microphone, camera, battery etc.). |
| allowfullscreen | true false |
Specifie the <iframe> can activate fullscreen mode by calling the requestFullscreen() method. This attribute is considered a legacy attribute and redefined as allow="fullscreen". |
| allowpaymentrequest | true false |
Specifies a cross-origin <iframe> should be allowed to invoke the Payment Request API. This attribute is considered a legacy attribute and redefined as allow="payment". |
| csp | - | A Content Security Policy enforced for the embedded resource. |
| fetchpriority | high|low|auto | Provides a hint of the relative priority to use when fetching the iframe document. |
| height | pixels | Specifies the height of the iframe. (default 150 pixels) |
| loading | eager lazy |
specifies how the browser should load the iframe. eager: Load the iframe immediately, regardless if it is outside the visible viewport (this is the default value). lazy: Defer loading of the iframe until it reaches a calculated distance from the viewport, as defined by the browser. |
| name | name | This attribute assigns a name to the floating frame so that it can be the target destination of hyperlinks. |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url |
Specifies which referrer to send when fetching the frame's resource |
| sandbox | allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation |
Applies extra restrictions to the content in the <iframe>. The value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions. |
| src | URL | This attribute contains the URL of the content to be displayed in the floating frame. If absent, the frame is blank. |
| srcdoc | HTMLCode | Inline HTML to embed, overriding the src attribute. If a browser does not support the srcdoc attribute, it will fall back to the URL in the src attribute. |
| width | pixels | Specifies the width of the iframe. (default 300 pixels) |
Global Attributes
<iframe> element also supports the Global Attributes in HTML.
Event Attributes
<iframe> element also supports the Event Attributes in HTML.
By Default CSS Value(s)
Most of the browsers will display the <iframe> element with the following by default value(s)
iframe {
display: inline;
width: 300px;
height: 150px;
}
iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}