• Home
• Web Tutorial
• Full Course
• English Tutorial
• HTML
• HTML Tag
• What is HTML <iframe> Tag

How to create HTML <iframe> Tag

An inline frame is marked up as follows

index.html

<iframe src="https://horje.com/learn/682/what-is-html-i-tag" title="Horje Free Online Web Tutorials">
</iframe>

Output should be:

Which browser will support for HTML <iframe> Tag

Attributes for HTML <iframe> Tag

How to Add and remove iframe borders (with CSS)

See the Example

index.html

 <iframe src="/default.asp" width="100%" height="300" style="border:1px solid black;">
</iframe>

<iframe src="/default.asp" width="100%" height="300" style="border:none;">
</iframe> 

Output should be:

How to set Default CSS Settings for HTML <iframe> Tag

Most browsers will display the <iframe> element with the following default values

index.html

<style>
iframe:focus {
  outline: none;
}

iframe[seamless] {
  display: block;
}
</style>

Output should be:

How to add HTML <iframe> allow attribute

The allow attribute specifies a feature policy to define what permissions are available to an <iframe>.

Applicable Elements

The allow Attribute can be used with the following elements:

• <iframe>

HTML <iframe> allow Attribute

The <iframe> tag represents a nested browsing context and is used to embed an HTML document in your current HTML document.

The allow attribute can be used with the <iframe> attribute to specify a permissions policy to determine what features are available to it when it is initialized. I.e., permitting the <iframe> to access the computer’s camera or microphone.

index.html

<iframe src="https://horje.com/learn/119/how-to-create-html-em-elements" allow="camera 'none'; microphone 'none'"></iframe>

Output should be:

How to Add HTML <iframe> allowfullscreen attribute

iframe, short for "inline frame", is the most common way that the allowfullscreen attribute is used. Thanks mostly to video sites like YouTube and Vimeo, videos embedded by third-party websites using an iframe can use the allowfullscreen attribute to enable a "fullscreen" button within the iframe.

Here is sample code for a YouTube video embedded using an iframe along with the allowfullscreen attribute:

index.html

<iframe width="560" height="315" src="//www.youtube.com/embed/jofNR_WkoCE" allowfullscreen></iframe>

Output should be:

How to add HTML <iframe> allowpaymentrequest Attribute

Note: This attribute is Experimental.

The allowpaymentrequest set to true if a cross-origin <iframe> should be allowed to invoke the Payment Request API.

Note: This attribute is considered a legacy attribute and redefined as allow="payment".

Attribute Values

index.html

<iframe src="https://www.paypal.com/" allowpaymentrequest>
  Your browser does not support iframe element.
</iframe>

How to add HTML <iframe> height Attribute

An <iframe> with a specified height and width of 200 pixels:

Definition and Usage

The height attribute specifies the height of an <iframe>, in pixels.

The default height is 150 pixels.

Browser Support

Syntax

<iframe height="pixels">

Attribute Values

index.html

<iframe src="https://horje.com/learn/683/what-is-html-iframe-tag" width="200" height="200">

Output should be:

How to Add HTML <iframe> loading attribute

The load event fires when the eagerly-loaded content has all been loaded. At that time, it's entirely possible (or even likely) that there may be lazily-loaded images or iframes within the visual viewport that haven't yet loaded.

index.html

<iframe loading="lazy" src="https://horje.com/learn/683/what-is-html-iframe-tag" title="..."></iframe>

Output should be:

How to add HTML <iframe> name Attribute

An <iframe> that act as a target for a link:

Definition and Usage

The name attribute specifies a name for an iframe.

This name attribute can be used to reference the element in a JavaScript, or as the value of the target attribute of an <a> or <form> element, or the formtarget attribute of an <input> or <button> element.

Browser Support

Syntax

<iframe name="name">

Attribute Values

index.html

<iframe src="https://horje.com/learn/683/what-is-html-iframe-tag" name="iframe_a">
<p>Your browser does not support iframes.</p>
</iframe>

Output should be:

How to add HTML <iframe> referrerpolicy Attribute

Specifies that no referrer information will be sent along with the request:

Definition and Usage

The referrerpolicy attribute specifies which referrer information to send when fetching an iframe.

Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<iframe referrerpolicy="no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|same-origin|strict-origin-when-cross-origin|unsafe-url">

Attribute Values

index.html

<iframe src="https://horje.com/view/1332/how-to-add-html-iframe-referrerpolicy-attribute" referrerpolicy="no-referrer"></iframe>

Output should be:

How to add HTML <iframe> referrerpolicy with no-referrer Attribute

No referrer information will be sent along with a request.

index.html

<iframe src="https://horje.com/view/1333/how-to-add-html-iframe-referrerpolicy-attribute" referrerpolicy="no-referrer"></iframe> 

Output should be:

How to add HTML <iframe> referrerpolicy with no-referrer-when-downgrade Attribute

Default. The referrer header will not be sent to origins without HTTPS.

index.html

<iframe src="https://horje.com/view/1333/how-to-add-html-iframe-referrerpolicy-attribute" referrerpolicy="no-referrer-when-downgrade"></iframe> 

Output should be:

How to add HTML <iframe> referrerpolicy with origin Attribute

Send only scheme, host, and port to the request client.

index.html

<iframe src="https://horje.com/view/1333/how-to-add-html-iframe-referrerpolicy-attribute" referrerpolicy="origin"></iframe> 

Output should be:

How to add HTML <iframe> referrerpolicy with origin-when-cross-origin Attribute

For cross-origin requests: Send only scheme, host, and port. For same-origin requests: Also include the path.

index.html

<iframe src="https://horje.com/view/1333/how-to-add-html-iframe-referrerpolicy-attribute" referrerpolicy="origin-when-cross-origin"></iframe> 

Output should be:

How to add HTML <iframe> referrerpolicy with same-origin Attribute

For same-origin requests: Referrer info will be sent. For cross-origin requests: No referrer info will be sent.

index.html

<iframe src="https://horje.com/view/1333/how-to-add-html-iframe-referrerpolicy-attribute" referrerpolicy="same-origin"></iframe>

Output should be:

How to add HTML <iframe> referrerpolicy with strict-origin Attribute

Only send referrer info if the security level is the same (e.g. HTTPS to HTTPS). Do not send to a less secure destination (e.g. HTTPS to HTTP)

index.html

<!DOCTYPE html>
<html>
<body>

<h1>The iframe referrerpolicy attribute</h1>

<iframe src="https://w3schools.com/" referrerpolicy="strict-origin">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

Output should be:

How to add HTML <iframe> referrerpolicy with strict-origin-when-cross-origin Attribute

Send full path when performing a same-origin request. Send only origin when the security level stays the same (e.g. HTTPS to HTTPS). Send no header to a less secure destination (HTTPS to HTTP)

index.html

<!DOCTYPE html>
<html>
<body>

<h1>The iframe referrerpolicy strict-origin-when-cross-origin attribute</h1>

<iframe src="https://horje.com/" referrerpolicy="strict-origin-when-cross-origin">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

Output should be:

How to add HTML <iframe> referrerpolicy with unsafe-url Attribute

Send origin, path and query string (but not fragment, password, or username). This value is considered unsafe

index.html

<!DOCTYPE html>
<html>
<body>

<h1>The iframe referrerpolicy unsafe-url attribute</h1>

<iframe src="https://horje.com/" referrerpolicy="unsafe-url">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

Output should be:

What is HTML <iframe> sandbox Attribute

An <iframe> with extra restrictions.

Definition and Usage

The sandbox attribute enables an extra set of restrictions for the content in the iframe.

When the sandbox attribute is present, and it will:

• treat the content as being from a unique origin
• block form submission
• block script execution
• disable APIs
• prevent links from targeting other browsing contexts
• prevent content from using plugins (through <embed>, <object>, <applet>, or other)
• prevent the content to navigate its top-level browsing context
• block automatically triggered features (such as automatically playing a video or automatically focusing a form control)

The value of the sandbox attribute can either be empty (then all restrictions are applied), or a space-separated list of pre-defined values that will REMOVE the particular restrictions.

Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<iframe sandbox="value">

Attribute Values

index.html

<!DOCTYPE html>
<html>
<body>

<h1>The iframe sandbox attribute</h1>

<iframe src="https://horje.com/" sandbox>
  <p>Your browser does not support iframes.</p>
</iframe>

<p>The "Get date and time" button will run a script in the inline frame.</p>
<p>Since the sandbox attribute is set, the content of the inline frame is not allowed to run scripts.</p>
<p>You can add "allow-scripts" to the sandbox attribute, to allow the JavaScript to run.</p>

</body>
</html>

Output should be:

How to add HTML <iframe> sandbox allow-forms Attribute

Allows form submission.

The "Submit" button will submit the form in the inline frame.

Since the sandbox attribute is set to an empty string (""), the submission of the form in the inline frame will be blocked.

Add "allow-forms" to the sandbox attribute, to allow form submission.

index.html

<!DOCTYPE html>
<html>
<body>

<h1>The iframe sandbox attribute</h1>

<iframe src="https://horje.com" sandbox="allow-forms">
  <p>Your browser does not support iframes.</p>
</iframe>

<p>The "Submit" button will submit the form in the inline frame.</p>
<p>Since the sandbox attribute is set to an empty string (""), the submission of the form in the inline frame will be blocked.</p>
<p>Add "allow-forms" to the sandbox attribute, to allow form submission.</p>

</body>
</html>

Output should be:

How to add HTML <iframe> sandbox allow-modals Attribute

Allows to open modal windows

index.html

<iframe src="https://horje.com" sandbox="allow-modals">
  <p>Your browser does not support iframes.</p>
</iframe>

Output should be:

How to add HTML <iframe> sandbox allow-orientation-lock Attribute

Allows to lock the screen orientation

index.html

<iframe src="https://horje.com/" sandbox="allow-orientation-lock">
</iframe>

Output should be:

How to add HTML <iframe> sandbox allow-pointer-lock Attribute

Allows to use the Pointer Lock API.

index.html

<iframe src="https://horje.com/" sandbox="allow-pointer-lock">
</iframe>

Output should be:

How to add HTML <iframe> sandbox allow-popups Attribute

Allows popups

index.html

<iframe src="https://horje.com/" sandbox="allow-popups">
</iframe>

Output should be:

How to add HTML <iframe> sandbox allow-popups-to-escape-sandbox Attribute

Allows popups to open new windows without inheriting the sandboxing.

index.html

<iframe src="https://horje.com/" sandbox="allow-popups-to-escape-sandbox">
</iframe>

Output should be:

How to add HTML <iframe> sandbox allow-presentation Attribute

Allows to start a presentation session.

index.html

<iframe src="https://horje.com/" sandbox="allow-presentation">
</iframe>

Output should be:

How to add HTML <iframe> sandbox allow-same-origin Attribute

Allows the iframe content to be treated as being from the same origin

index.html

<iframe src="https://horje.com/" sandbox="allow-same-origin">
</iframe>

Output should be:

How to add HTML <iframe> sandbox allow-scripts Attribute

Allows to run scripts

index.html

<iframe src="https://horje.com/" sandbox="allow-scripts">
</iframe>

Output should be:

How to add HTML <iframe> sandbox allow-top-navigation Attribute

Allows the iframe content to navigate its top-level browsing context

index.html

<iframe src="https://horje.com/" sandbox="allow-top-navigation">
</iframe>

Output should be:

How to add HTML <iframe> sandbox allow-top-navigation-by-user-activation Attribute

Allows the iframe content to navigate its top-level browsing context, but only if initiated by user.

index.html

<iframe src="https://horje.com/" sandbox="allow-top-navigation-by-user-activation">
</iframe>

Output should be:

How to add HTML <iframe> src Attribute

An <iframe> in its simplest use:

Definition and Usage

The src attribute specifies the address of the document to embed in an iframe.

Browser Support

Syntax

<iframe src="URL">

Attribute Values

index.html

<!DOCTYPE html>
<html>
<body>

<h1>The iframe src attribute</h1>

<iframe src="https://horje.com/view/1353/how-to-add-html-iframe-sandbox-allow-top-navigation-by-user-activation-attribute">
</iframe>

</body>
</html>

Output should be:

How to add HTML <iframe> srcdoc Attribute

An <iframe> with a srcdoc attribute.

This is a way to add HTML Code to Iframe

Definition and Usage

The srcdoc attribute specifies the HTML content of the page to show in the inline frame.

Tip: This attribute is expected to be used together with the sandbox and seamless attributes.

If a browser supports the srcdoc attribute, it will override the content specified in the src attribute (if present).

If a browser does NOT support the srcdoc attribute, it will show the file specified in the src attribute instead (if present).

Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<iframe srcdoc="HTML_code">

Attribute Values

index.html

<iframe srcdoc="<p>Hello world!</p>" src="https://horje.com/view/1354/how-to-add-html-iframe-src-attribute">

Output should be:

How to add HTML <iframe> width Attribute

An <iframe> with a specified height and width of 200 pixels:

Definition and Usage

The width attribute specifies the width of an iframe, in pixels.

The default width is 300 pixels.

Browser Support

Syntax

<iframe width="pixels">

Attribute Values

index.html

<!DOCTYPE html>
<html>
<body>

<h1>The iframe height attribute</h1>

<iframe src="https://horje.com/" width="200" height="200">
</iframe>

</body>
</html>

Output should be:

How to Make iframe automatically adjust height

This iframe will run according to your web browser fit.

index.html

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
  }
</script>
<iframe src="https://horje.com" width="100%" frameborder="0" scrolling="no" onload="resizeIframe(this)" />

Output should be:

Reffered: https://www.w3schools.com/tags/tag_iframe.asp