HTML Iframes

An iframe (short for "inline frame") is an HTML element that allows you to embed another HTML document within the current one.

This can be useful for embedding content from another website, such as a video from YouTube, or for creating a nested browsing context within a webpage.

The iframe element is defined with the <iframe> tag and its src attribute specifies the URL of the document to be embedded. Other attributes, such as width and height, can be used to control the size of the embedded content.

Iframe Attributes in HTML

The <iframe> element has several attributes that can be used to control its behavior and appearance. Some of the most commonly used <iframe> attributes include:

src:

This attribute specifies the URL of the document that should be embedded within the <iframe>. This attribute is required for the <iframe> to be functional.

Example using the src attribute to embed a video from YouTube:

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

width and height:

These attributes specify the width and height of the <iframe> in pixels.

Here is an example using the width and height attributes to control the size of the <iframe>:

<iframe src="https://example.com" width="800" height="600"></iframe>

name:

This attribute can be used to give the <iframe> a name, which can be used to target the <iframe> with JavaScript or to create links that point to specific locations within the embedded document.

Here is an example using the name attribute to give the <iframe> a name:

<iframe src="https://example.com" name="my_iframe"></iframe>

sandbox:

This attribute is used to restrict the actions that can be performed in an iframe. This can be useful for security purpose.

Here is an example using the sandbox attribute to restrict the actions that can be performed in an iframe:

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

style:

This attribute allows to apply css style rules to iframe.

Here is an example using the style attribute to add inline CSS to the <iframe>:

<iframe src="https://example.com" style="border:1px solid #000;"></iframe>

class:

This attribute assigns one or more classnames to an element, which can be used to target the <iframe> with CSS.

Here is an example using the class attribute to assign a class to the <iframe>:

<iframe src="https://example.com" class="my-iframe"></iframe>

and in css you can use it like this :

.my-iframe {
  border: 1px solid #000;
}

id:

This attribute assigns a unique id to the iframe element, so that it can be targeted with CSS or JavaScript.

Here is an example using the id attribute to assign a unique id to the <iframe>:

<iframe src="https://example.com" id="unique_iframe"></iframe>

and in javascript or css you can use it like this :

const iframe = document.getElementById('unique_iframe');

allowfullscreen:

This boolean attribute if present, allow the iframe to run requestFullscreen.

Here is an example using the allowfullscreen attribute:

<iframe src="https://example.com" allowfullscreen></iframe>

frameborder:

This attribute is used to specify whether the browser should display a border around the iframe.

Here is an example using the frameborder attribute to specify whether the browser should display a border around the iframe:

<iframe src="https://example.com" frameborder="0"></iframe>

It's worth noting that some of these attributes are now obsolete and not widely supported by modern browsers, frameborder, scrolling and marginwidth and marginheight attributes has been replaced by css properties.

HTML Basics