What is the use of iframe in HTML?

The iframe element, means inline frame, allows you to embed another HTML document within the current HTML page. It essentially creates a small window within your webpage in which a separate HTML document can be displayed.

Which are the attributes of an iframe?

src

The most basic use of the <iframe> element involves the src attribute, which specifies the URL of the page to be embedded.

width & height

You can control the width and height of the inline frame using the width and height attributes, typically specified in pixels.

<iframe src="https://onlinetutorialhub.com/html5-course/svg-element-in-html/" width="600" height="450"></iframe>

This sets the iframe to a width of 600 pixels and a height of 450 pixels.

What is sandbox attribute in HTML?

The sandbox attribute is a critical HTML5 feature for security, as it applies restrictions to the content loaded within the iframe. When the sandbox attribute is present without any values, it enables all restrictions, disabling features like scripts, forms, plugins, and links that target other browsing contexts.

<iframe sandbox src="http://example.com/"></iframe>

This embeds an untrusted webpage with all restrictions enabled. You can selectively relax these restrictions by adding space-separated values to the sandbox attribute, such as allow-forms, allow-scripts, and allow-top-navigation.

<iframe sandbox="allow-scripts allow-forms" src="http://example.com/"></iframe>

This allows the embedded page to run scripts and submit forms. Note that browser support for the sandbox attribute and its values may vary.

seamless attribute

The HTML5 seamless attribute, when present, instructs the browser to display the iframe’s content as if it were an integral part of the main HTML document, potentially adopting its styles more seamlessly.

<iframe src="content.html" name="thisframe" width="200" height="300" seamless></iframe>

allowfullscreen

when present on an <iframe> element, indicates whether the inline frame’s content is allowed to use the requestFullscreen() API to display the iframe in full-screen mode. This attribute determines whether to allow the iframe’s contents to use requestFullscreen().

Example:

<iframe src="example.com/embedded_content" width="560" height="315" allowfullscreen></iframe>

In this example, the allowfullscreen attribute is present without any value. This allows the content within the <iframe> from “example.com/embedded_content” to potentially trigger a full-screen display if it has the necessary scripts or controls to do so.

How to embed YouTube video in HTML with iframe

must add the embed in the url structure, then add controls=0 – Player controls does not display.controls=1 (default) – Player controls is displayed. Add playlist=videoID and loop=1 to let your video loop forever.

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ZKm0cCo3fq4?si=onDwCVneJsAAcjhjcontrols=0">
</iframe>

<iframe width="560" height="315" src="https://www.youtube.com/embed/ZKm0cCo3fq4?si=onDwCVneJsAAcjhj"></iframe>