An iframe, or inline frame, is created using the <iframe> element. It allows another document or supported external resource to be displayed inside the current webpage.

<iframe src="page.html"></iframe>

Iframes are commonly used for embedded documents, maps, videos, external widgets, and other supported content.

2. Basic iframe Syntax

The basic syntax of an iframe is:

<iframe
    src="page.html"
    width="600"
    height="400">
</iframe>

Attribute	Purpose
`src`	Specifies the resource to display.
`width`	Specifies the iframe width.
`height`	Specifies the iframe height.

3. The src Attribute

The src attribute specifies the URL or path of the content that should be displayed inside the iframe.

<iframe src="about.html"></iframe>

A relative path can be used for a page within the same website.

<iframe src="pages/contact.html"></iframe>

4. Embedding Another HTML Page

An HTML page can be embedded inside another HTML page.

<iframe
    src="about.html"
    width="600"
    height="400">
</iframe>

Example Structure:

website/
│
├── index.html
├── about.html
└── contact.html

The index.html page can display about.html inside an iframe.

5. width Attribute

The width attribute specifies the width of the iframe.

<iframe
    src="about.html"
    width="700"
    height="400">
</iframe>

CSS is generally preferred when you need flexible or responsive sizing.

6. height Attribute

The height attribute specifies the height of the iframe.

<iframe
    src="about.html"
    width="700"
    height="400">
</iframe>

7. title Attribute

The title attribute provides an accessible name describing the iframe content.

<iframe
    src="about.html"
    title="About Our Company"
    width="700"
    height="400">
</iframe>

Important: Give an iframe a meaningful title, especially when the embedded content has an important purpose.

8. border Styling

CSS can be used to add a border around an iframe.

<iframe
    src="about.html"
    title="About Page"
    style="border:2px solid #0d6efd;"
    width="700"
    height="400">
</iframe>

9. Responsive Iframe

An iframe can be made responsive by using CSS.

<iframe
    src="about.html"
    title="About Page"
    style="width:100%; height:400px; border:0;">
</iframe>

Benefits:

Fits different screen widths.
Works better on mobile devices.
Prevents unnecessary horizontal scrolling.

10. Embedding a Map

One common use of iframes is embedding a map supplied by a map provider.

<iframe
    src="https://www.google.com/maps/embed?pb=..."
    width="600"
    height="450"
    style="border:0;"
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade"
    title="Location Map">
</iframe>

A map provider may give you an embed code that can be placed directly into your webpage.

11. Embedding a Video

Iframes are commonly used to embed videos from platforms that provide an official embed URL or embed code.

<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="HTML Tutorial Video"
    allowfullscreen>
</iframe>

Note: Use the official embed option provided by the video platform.

12. allowfullscreen Attribute

The allowfullscreen attribute allows embedded content to use fullscreen mode when supported.

<iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Tutorial Video"
    allowfullscreen>
</iframe>

13. loading Attribute

The loading attribute provides a loading hint for the iframe.

Value	Description
`lazy`	Defers loading until the iframe is near the viewport.
`eager`	Loads the iframe without deferring based on viewport proximity.

<iframe
    src="contact.html"
    title="Contact Page"
    loading="lazy"
    width="600"
    height="400">
</iframe>

14. sandbox Attribute

The sandbox attribute applies restrictions to the content loaded inside an iframe.

<iframe
    src="embedded-page.html"
    title="Embedded Page"
    sandbox
    width="600"
    height="400">
</iframe>

You can also provide specific sandbox permissions.

<iframe
    src="embedded-page.html"
    title="Embedded Page"
    sandbox="allow-forms allow-scripts"
    width="600"
    height="400">
</iframe>

Important: Sandbox permissions should be granted only when the embedded content actually requires them.

15. referrerpolicy Attribute

The referrerpolicy attribute controls how much referrer information is sent when the iframe loads its resource.

<iframe
    src="https://example.com"
    title="Example Website"
    referrerpolicy="no-referrer">
</iframe>

16. name Attribute

The name attribute gives the browsing context a name. Links or forms can target a named iframe.

<iframe
    name="contentFrame"
    src="page1.html"
    title="Content Frame"
    width="600"
    height="400">
</iframe>

A link can target that iframe:

<a href="page2.html" target="contentFrame">
    Open Page 2
</a>

17. sandbox Tokens

The sandbox feature supports tokens that selectively relax particular restrictions.

Token	Purpose
`allow-forms`	Allows form submission.
`allow-modals`	Allows modal-like features such as certain dialog APIs.
`allow-popups`	Allows certain popup creation.
`allow-presentation`	Allows presentation-related features.
`allow-same-origin`	Preserves the embedded content's origin.
`allow-scripts`	Allows scripts to run inside the sandbox.
`allow-downloads`	Allows downloads from the framed content where permitted.

18. iframe with CSS Class

A CSS class can be used when the same iframe styling is required in multiple places.

<style>
    .content-frame {
        width: 100%;
        height: 450px;
        border: 1px solid #dee2e6;
        border-radius: 8px;
    }
</style>

<iframe
    class="content-frame"
    src="about.html"
    title="About Page">
</iframe>

19. iframe Fallback Content

Content placed between the opening and closing <iframe> tags can act as fallback content for browsers that do not support iframes.

<iframe
    src="about.html"
    title="About Page"
    width="600"
    height="400">

    Your browser does not support iframes.

</iframe>

20. iframe and Same-Origin Concept

An iframe can display content from the same website or from another origin, depending on the resource and the browser's security rules.

<iframe
    src="/pages/about.html"
    title="About Page">
</iframe>

Browser security controls how documents from different origins can interact with one another.

21. iframe Security Considerations

When embedding content from another source, it is important to understand the permissions being granted to that content.

Use trusted sources.
Use sandbox when appropriate.
Grant only required permissions.
Use an appropriate referrerpolicy when needed.
Avoid embedding unknown or untrusted content.

22. Example: Complete Responsive iframe

<style>
    .responsive-frame {
        width: 100%;
        height: 450px;
        border: 0;
        border-radius: 8px;
    }
</style>

<iframe
    class="responsive-frame"
    src="about.html"
    title="About Our Website"
    loading="lazy"
    referrerpolicy="no-referrer">
</iframe>

23. Common iframe Attributes

Attribute	Purpose	Example
`src`	Specifies the embedded resource.	`src="about.html"`
`width`	Specifies iframe width.	`width="600"`
`height`	Specifies iframe height.	`height="400"`
`title`	Provides an accessible name.	`title="About Page"`
`loading`	Provides a loading hint.	`loading="lazy"`
`sandbox`	Applies restrictions to embedded content.	`sandbox`
`allowfullscreen`	Allows fullscreen when supported.	`allowfullscreen`
`name`	Names the iframe browsing context.	`name="contentFrame"`
`referrerpolicy`	Controls referrer information.	`referrerpolicy="no-referrer"`

24. Common Mistakes

Using an incorrect iframe URL.
Embedding untrusted content.
Forgetting the title attribute.
Using fixed dimensions that do not work on mobile devices.
Giving unnecessary sandbox permissions.
Embedding content that the external server does not allow to be framed.
Using too many iframes and making the page unnecessarily heavy.

25. Practice Task

Create an HTML page containing:

An iframe that loads another local HTML page.
An iframe with a meaningful title.
A responsive iframe using CSS.
An iframe with loading="lazy".
A video embed using an official embed URL.
An iframe with the sandbox attribute.
A named iframe targeted by a hyperlink.

26. Complete Practice Example

<!DOCTYPE html>
<html>

<head>

    <title>HTML iframe Example</title>

    <style>
        .content-frame {
            width: 100%;
            height: 450px;
            border: 1px solid #dee2e6;
            border-radius: 8px;
        }
    </style>

</head>

<body>

    <h1>Embedded Content</h1>

    <iframe
        class="content-frame"
        src="about.html"
        title="About Our Website"
        loading="lazy">

        Your browser does not support iframes.

    </iframe>

    <br><br>

    <iframe
        class="content-frame"
        src="contact.html"
        title="Contact Page"
        loading="lazy"
        referrerpolicy="no-referrer">

        Your browser does not support iframes.

    </iframe>

</body>

</html>

Summary

HTML iframes are created using the <iframe> element and allow supported external or local content to be displayed inside a webpage. Important attributes include src, width, height, title, loading, sandbox, allowfullscreen, and referrerpolicy. Iframes are commonly used for maps, videos, documents, widgets, and embedded webpages.

← Previous: Video Next: Lists and Tables →