HTML <iframe> Tag

The HTML <iframe> tag is used to embed another HTML document within the current document. This embedded content can be a webpage, video, map, or other resources, creating a “frame” inside the current webpage. The <iframe> tag is a versatile tool for integrating external or additional content seamlessly.

The <iframe> tag is commonly used for purposes like embedding YouTube videos, Google Maps, advertisements, or third-party widgets.

Basic Syntax of HTML <iframe> Tag

The basic structure of the <iframe> tag is:

</>
Copy
<iframe src="URL" width="width-value" height="height-value"></iframe>

The src attribute specifies the URL of the embedded resource, while the width and height attributes define the size of the iframe.

Attributes of HTML <iframe> Tag

  • src: Specifies the URL of the embedded content.
  • width: Defines the width of the iframe (in pixels or percentage).
  • height: Defines the height of the iframe (in pixels or percentage).
  • allow: Specifies permissions for the iframe, such as fullscreen or autoplay.
  • name: Assigns a name to the iframe, which can be targeted by scripts or links.
  • sandbox: Enables restrictions on the iframe’s content for security, such as disallowing forms or scripts.
  • frameborder: Specifies whether the iframe should have a border (deprecated; use CSS instead).
  • loading: Defines when the iframe should load: lazy (on demand) or eager (immediately).
  • allowfullscreen: Allows the iframe content to display in fullscreen mode.

Basic Example of HTML <iframe> Tag

Here’s a simple example of embedding a webpage using an iframe:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Embedded Webpage</h2>
        <iframe src="https://www.example.com" width="500" height="400"></iframe>
    </body>
</html>
Basic Example of HTML <iframe> Tag

Explanation: This example embeds the website https://www.example.com in an iframe with a width of 600 pixels and a height of 400 pixels.

Using the sandbox Attribute

The sandbox attribute imposes restrictions on the content inside the iframe for security purposes:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Sandboxed Iframe</h2>
        <iframe src="https://www.example.com" width="600" height="400" sandbox="allow-scripts"></iframe>
    </body>
</html>

Explanation: The sandbox attribute in this example allows only scripts to execute in the embedded content while blocking other actions like form submissions or plugin usage.

Styling the <iframe> Tag with CSS

You can customize the appearance of the iframe using CSS:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            iframe {
                border: 2px solid #007BFF;
                border-radius: 10px;
                margin: 20px auto;
                display: block;
            }
        </style>
    </head>
    <body>
        <h2>Styled Iframe</h2>
        <iframe src="https://www.example.com" width="600" height="400"></iframe>
    </body>
</html>

Result: The iframe has a blue border, rounded corners, and is centered on the page.

Practical Applications of the <iframe> Tag

  • Embed External Webpages: Include other websites or resources within your webpage.
  • Video Integration: Embed videos from platforms like YouTube or Vimeo.
  • Interactive Maps: Include maps, such as Google Maps, for navigation and location display.
  • Advertisements: Display ads or banners from third-party providers.
  • Custom Widgets: Add weather widgets, calculators, or other interactive tools.