Categories
Web development

HTML iframe tag

HTML iframe tag

The HTML <iframe> tag defines an inline frame. The inline frame is used to embed another document within the HTML document.

Syntax:

 <iframe src="url" title="description"></iframe> 

Example:

An <iframe> in its simplest use. Embedding another document within the current HTML document:

<!DOCTYPE html>
<html>
<body>

<iframe src="https://www.lenastanley.com/" title="lena design">
</iframe>

</body>
</html>

Output:

Attributes:

allowfullscreen (value- true/ false) – the <iframe> element can activate fullscreen mode by calling the requestFullscreen() method (true).

allowpaymentrequest (value- true/false) – can be allowed to invoke the Payment Request API (true).

height (value- px) – defines the height of an (default height is 150 px).

Syntax:

<iframe height="pixels"> 

Example:

<!DOCTYPE html>
<html>
<body>

<iframe src="https://www.lenastanley.com/" height="300" title="lena design">
</iframe>

</body>
</html>

Output:

An with a specified height of 300 px:

loading (value- eager, lazy) – defines whether a browser should load an iframe immediately or defer the loading of iframes until some conditions are met.

name (value- text) – defines the name of an <iframe>.

referrerpolicy (value- no-referrer/ no-referrer-when-downgrade/ origin/ origin-when-cross-origin/ same-origin/ strict-origin-when-cross-origin/ unsafe-url) – defines which referrer information to send when fetching the iframe.

sandbox (value- allow-forms/ allow-pointer-lock/ allow-popups/ allow-same-origin/ allow-scripts/ allow-top-navigation) – Enables an extra set of restrictions for the content in an <iframe>.

src (value- URL) – defines the address of the document to embed in the <iframe>.

srcdoc (value- HTML_code) – defines the HTML content of the page to show in the <iframe>.

width (value- px) – defines the width of an (default width is 300 px).

Syntax:

<iframe width="px"> 

Example:

<!DOCTYPE html>
<html>
<body>

<iframe src="https://www.lenastanley.com/" width="640" title="lena design">
</iframe>

</body>
</html>

Output:

An <iframe> with a specified width of 640 px:

You can add the style attribute and use the CSS height and width properties, and remove/add the <iframe> border:

<!DOCTYPE html>
<html>
<body>


<p>An iframe with a thick black borde</p>
<iframe src="https://www.lenastanley.com/" width="100%" height="300" style="border:5px solid black;">
</iframe>

<p>An iframe with no borders:</p>
<iframe src="https://www.lenastanley.com/" width="100%" height="300" style="border:none;">
</iframe>

</body>
</html>

Output:

An iframe with a thick black border:

An iframe with no borders:

Enjoy coding!