HTML Iframes

Learn how to embed other webpages, YouTube videos, Google Maps, documents, and external applications using the HTML <iframe> element.

Introduction

In the previous lesson, you learned about HTML Multimedia and how audio and video can be embedded directly into webpages.

Sometimes, however, the content we want to display already exists on another webpage, website, or external service.

For example, a website may need to display an interactive map, a hosted video, an online document, a dashboard, or another webpage without forcing the user to leave the current page.

HTML provides the <iframe> element for this purpose.

An iframe creates an independent browsing area inside the current webpage and loads another document inside that area.

Basic Iframe

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

Without an Iframe

Users may need to leave the current webpage.
External content opens separately.
Maps cannot appear directly inside the page.
Hosted videos may require navigation to another website.

With an Iframe

External content appears inside the current page.
Users can remain on the main website.
Maps can be displayed directly.
Hosted videos can play inside the webpage.

Create Main Webpage

↓

Add <iframe>

↓

Provide External Source

↓

Browser Loads Embedded Document

↓

Content Appears Inside the Page

A Page Inside a Page

An iframe allows one HTML document to display another document inside a rectangular area of the current webpage.

What is an Iframe?

Iframe stands for Inline Frame.

An iframe is an HTML element that creates an embedded browsing context inside the current webpage.

The embedded document is loaded separately from the main document and appears inside the boundaries of the iframe.

The content inside an iframe can come from another page in the same project or from an external service that allows embedding.

Iframe Example

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

Internal Pages

Display another HTML document from the same website.

Hosted Videos

Display videos provided through supported embed URLs.

Interactive Maps

Display map services that provide iframe embed code.

External Applications

Display supported dashboards, forms, documents, and widgets.

Main Document

Contains the primary webpage.
Controls the surrounding layout.
Contains the iframe element.
Continues to exist independently.

Embedded Document

Loads inside the iframe.
Has its own document structure.
Can come from another source.
Runs inside its own browsing context.

Simple Definition

An iframe is a window inside a webpage that displays another webpage or document.

Why Do We Need Iframes?

Many useful web experiences are already provided by external platforms and services.

Instead of rebuilding those experiences from the beginning, websites can sometimes embed the content provided by those services.

Without Iframes

External webpages cannot be displayed inside the current page.
Users may need to leave the website to watch hosted videos.
Interactive maps cannot be embedded directly.
External documents require separate navigation.
Third-party integrations become more difficult.

With Iframes

Supported external webpages can be embedded.
Hosted videos can play inside the page.
Interactive maps can appear directly.
Documents can be displayed without leaving the website.
Supported third-party services can be integrated.

Keep Users on the Page

Embedded content can be viewed without navigating away from the current website.

Add Interactive Content

Maps and other supported tools can remain interactive inside the page.

Reuse Existing Content

Existing pages or services can sometimes be displayed without rebuilding them.

Integrate Services

Supported external platforms can provide ready-made embed experiences.

Display Documents

Documents and presentations can be embedded when the provider supports it.

Add External Tools

Dashboards, forms, and widgets can sometimes be integrated through iframe-based embeds.

External Content Already Exists

↓

Provider Allows Embedding

↓

Copy or Create Embed URL

↓

Add Iframe to Webpage

↓

Content Appears Inside the Page

Real-World Analogy

Imagine standing inside a house and looking through a window.

You remain inside the house, but the window allows you to see something outside.

The outside view is not physically part of the room, but it is visible through a defined opening.

An iframe works in a similar way.

The main webpage remains the primary document, while the iframe creates a window through which another document is displayed.

House

The house is the main structure.
The window creates an opening.
The outside view appears through the window.
You remain inside the house.

Webpage

The webpage is the main document.
The iframe creates an embedded area.
Another document appears inside it.
The user remains on the main webpage.

Window vs Iframe

House Structure         Webpage Structure
───────────────         ─────────────────

House                   Main Webpage

Window                  <iframe>

Outside View            Embedded Webpage

Main Webpage

↓

Iframe Opening

↓

External Document

↓

Content Visible Inside Main Page

The Window Analogy

The iframe does not merge the external document into the main document. It displays that document inside a separate embedded browsing area.

HTML Iframe Element

The <iframe> element creates an inline frame inside the webpage.

The src attribute provides the address of the document that should be loaded inside the frame.

General Syntax

<iframe
    src="URL"
    width="500"
    height="300"
    title="Description"
>
</iframe>

Part	Purpose
<iframe>	Creates the inline frame
src	Specifies the document or embed URL
width	Sets the displayed width
height	Sets the displayed height
title	Provides an accessible description
loading	Controls eager or lazy loading behavior

src

Provides the URL or path of the document to embed.

width

Controls the displayed width of the iframe.

height

Controls the displayed height of the iframe.

title

Provides a meaningful accessible name for the iframe.

loading

Controls whether the iframe loads eagerly or lazily.

sandbox

Can apply additional restrictions to embedded content.

Iframe with Common Attributes

<iframe
    src="about.html"
    width="600"
    height="300"
    title="About Page Content"
    loading="lazy"
>
</iframe>

Create <iframe>

↓

Set src

↓

Set Dimensions

↓

Add Accessible Title

↓

Choose Loading Behavior

↓

Browser Loads the Document

Use CSS for Responsive Layouts

Width and height attributes are useful for basic examples, but responsive websites should normally use CSS so embedded content adapts to different screen sizes.

Example 1: Display Another HTML Page

An iframe can display another HTML page from the same project.

Suppose the project contains two files named index.html and about.html.

Project Structure

Project/
│
├── index.html
└── about.html

The about.html document can be displayed inside index.html by using its relative path as the iframe source.

Embedding a Local HTML Page

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

Main Webpage

Browser Opens index.html

↓

Finds the Iframe

↓

Reads src="about.html"

↓

Requests about.html

↓

Loads the Document

↓

Displays It Inside the Frame

index.html

Acts as the main webpage.
Contains the iframe element.
Controls the surrounding layout.

about.html

Acts as the embedded document.
Loads inside the iframe.
Has its own HTML content.

The Path Must Be Correct

If the src path does not match the actual file location, the embedded page cannot be loaded.

The Title Attribute

The title attribute provides a meaningful accessible name for the iframe.

Assistive technologies can use this information to help users understand what the embedded frame contains.

Iframe Title

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

Missing or Unclear Title

Users may not understand the frame purpose.
Assistive technology receives less useful context.
Multiple iframes become harder to distinguish.

Meaningful Title

Describes the embedded content.
Provides useful accessibility information.
Helps distinguish multiple frames.

Meaningful Iframe Titles

<!-- ❌ Too vague -->

<iframe
    src="map.html"
    title="Iframe"
>
</iframe>


<!-- ✅ Meaningful -->

<iframe
    src="map.html"
    title="Map showing our Mumbai office location"
>
</iframe>

Accessibility

Provides context about the purpose of the embedded content.

Navigation

Helps users understand what they are moving into.

Multiple Frames

Helps distinguish one embedded frame from another.

Clear Purpose

Communicates what the iframe contains.

Describe the Content, Not the Element

A title such as "Office location map" is more useful than a generic title such as "iframe".

The Loading Attribute

The loading attribute controls when the browser should load an iframe.

Loading every iframe immediately can increase initial network activity and page loading work.

For iframes that are not immediately visible, lazy loading can delay loading until the frame approaches the viewport.

Value	Behavior	Common Use
eager	Loads the iframe immediately	Important content visible near the top of the page
lazy	Defers loading until the iframe approaches the viewport	Below-the-fold embeds

Lazy Loading an Iframe

<iframe
    src="map.html"
    title="Office Location Map"
    loading="lazy"
>
</iframe>

loading="eager"

Loads immediately.
Uses network resources earlier.
Useful for important visible content.

loading="lazy"

Delays off-screen loading.
Can reduce initial page work.
Useful for content farther down the page.

Page Loads

↓

Browser Finds Lazy Iframe

↓

Iframe Remains Far from Viewport

↓

Loading is Deferred

↓

User Scrolls Near Iframe

↓

Browser Loads Embedded Content

Use Lazy Loading Appropriately

Lazy loading is especially useful for non-critical iframes located below the initially visible part of the page.

Example 2: Embedding YouTube Video

Video platforms can provide special embed URLs that are designed to work inside iframes.

A YouTube watch-page URL is different from a YouTube embed URL.

YouTube Video Embed

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

Part	Purpose
width	Sets the player width
height	Sets the player height
src	Provides the video embed URL
title	Describes the embedded video
allowfullscreen	Allows fullscreen playback

Embedded Video

Choose Video

↓

Open Share Options

↓

Choose Embed

↓

Copy Iframe Code

↓

Paste into HTML

↓

Video Appears Inside Page

Normal Video Link

Usually opens the video platform.
May navigate away from the website.
Does not create an embedded player.

Embed URL

Designed for embedded playback.
Loads inside the iframe.
Keeps the player inside the webpage.

Use the Embed URL

A normal webpage URL is not always suitable for iframe embedding. Use the embed code or embed URL provided by the service.

Example 3: Embedding Google Maps

Map services can provide iframe embed code for displaying interactive locations inside webpages.

Users can interact with the embedded map without leaving the current website.

Google Maps Embed

<iframe
    src="https://www.google.com/maps/embed?pb=..."
    width="600"
    height="450"
    loading="lazy"
    title="Office Location"
>
</iframe>

Embedded Map

Choose Location

↓

Open Share Options

↓

Choose Embed Map

↓

Copy Iframe Code

↓

Add Code to Webpage

↓

Interactive Map Appears

Office Locations

Show visitors where a company office is located.

Store Finders

Display physical store locations.

Hotels

Show nearby roads, landmarks, and destinations.

Event Venues

Help visitors locate an event or meeting place.

Use the Provider Embed Code

Interactive map services normally provide a dedicated embed option. Use the generated embed code instead of attempting to iframe a normal map webpage.

Browser Rendering Flow

An iframe causes the browser to load another document inside the current document.

The main webpage and the embedded document are processed as separate browsing contexts.

Read Main HTML

↓

Find <iframe>

↓

Read src Attribute

↓

Request Embedded Resource

↓

Receive Embedded Document

↓

Create Separate Browsing Context

↓

Render Embedded Content

↓

Display It Inside Main Page

Iframe Rendering Flow

Main HTML Document
        │
        ▼
Find <iframe>
        │
        ▼
Read src Attribute
        │
        ▼
Request Embedded Resource
        │
        ▼
Receive Document
        │
        ▼
Create Embedded Browsing Context
        │
        ▼
Render Embedded Document
        │
        ▼
Display Inside Main Webpage

Main Page

Has its own HTML document.
Controls the surrounding layout.
Contains the iframe element.
Continues rendering independently.

Iframe Content

Loads as another document.
Has its own browsing context.
May come from another origin.
Renders inside the iframe boundaries.

Separate Document Context

An iframe does not simply copy external HTML into the main page. The browser loads and renders another document inside a separate embedded context.

Real-World Applications

Iframes are commonly used when another service provides content specifically designed for embedding.

Interactive Maps

Office locations, store locations, routes, and event venues.

Hosted Videos

Tutorials, product demonstrations, interviews, and presentations.

Online Documents

Documents, presentations, spreadsheets, and supported PDF viewers.

Dashboards

Analytics, reports, charts, and external monitoring tools.

Forms

Surveys, registrations, feedback forms, and supported external form services.

Calendars

Public schedules, event calendars, and booking information.

Media Players

Hosted audio players, playlists, and supported streaming embeds.

External Widgets

Specialized tools and applications provided by trusted services.

Choose External Service

↓

Confirm Embedding is Supported

↓

Generate Embed Code

↓

Add Iframe to Page

↓

Test Security and Responsiveness

↓

Publish Embedded Experience

Embedding Must Be Allowed

A service can decide whether its pages may be displayed inside an iframe. Developers cannot assume that every external website can be embedded.

Advantages & Limitations of Iframes

Iframes are useful for specific embedding tasks, but they also introduce important limitations.

Advantages

Embeds supported external content.
Keeps users on the current webpage.
Integrates maps and hosted videos.
Can reuse existing internal pages.
Supports third-party widgets and documents.
Separates embedded content from the main document.

Limitations

Some websites completely block embedding.
Each iframe can add network and rendering work.
Responsive layouts may require additional CSS.
Cross-origin interaction is restricted.
Embedded content can create accessibility problems.
External content depends on another provider.

Area	Advantage	Limitation
Integration	External services can be embedded	Provider must allow embedding
Navigation	Users can remain on the page	Embedded navigation may confuse users
Development	Existing experiences can be reused	Customization may be limited
Performance	Content can be loaded independently	Too many frames can increase resource usage
Security	Content is separated into another context	Untrusted content requires careful restrictions
Responsive Design	Can fit many layouts	Additional CSS is often required

Security Restrictions

Websites can prevent themselves from being embedded.

Performance Cost

Every iframe can load another document and its resources.

Responsive Challenges

Fixed dimensions may overflow smaller screens.

External Dependency

The embedded experience can fail if the external service becomes unavailable.

Do Not Use Iframes for Everything

Iframes are best for genuine embedding requirements. Normal website content should usually remain part of the main document and application structure.

Common Beginner Mistakes

Forgetting the src Attribute

Without a source, the iframe has no external document to load.

Using an Incorrect File Path

A wrong relative path prevents local HTML documents from loading.

Expecting Every Website to Work

Many websites prevent iframe embedding through security policies.

Forgetting the title Attribute

A missing accessible name makes the purpose of the iframe harder to understand.

Using a Generic Title

Titles such as "iframe" or "content" do not meaningfully describe the embedded resource.

Using a Normal Page URL Instead of an Embed URL

Services such as video and map platforms often provide special URLs for embedding.

Using Fixed Width on Mobile

A wide iframe can overflow the viewport on small screens.

Loading Every Iframe Immediately

Many eager-loading iframes can increase initial page work.

Embedding Untrusted Content

External content should be carefully evaluated before embedding.

Using Too Many Iframes

Each iframe can load another document and additional resources.

Ignoring Security Restrictions

Cross-origin rules and provider security policies limit what embedded documents can do.

Assuming Iframe Content Becomes Main Page Content

The embedded document remains a separate browsing context.

Missing Source

<!-- ❌ No document to load -->

<iframe
    width="600"
    height="300"
    title="About Page"
>
</iframe>


<!-- ✅ Source provided -->

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

Responsive Iframe

<!-- ❌ Can overflow small screens -->

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


<!-- ✅ Better responsive approach -->

<iframe
    src="about.html"
    title="About Page"
    style="width: 100%; max-width: 1200px; height: 600px;"
>
</iframe>

Poor Iframe Usage

Missing title attributes.
Untrusted external sources.
Too many embedded documents.
Fixed widths that overflow.
Normal URLs used instead of embed URLs.

Better Iframe Usage

Meaningful accessible titles.
Trusted and approved sources.
Only necessary embeds.
Responsive dimensions.
Provider-supported embed URLs.

Embedding Can Be Blocked

If a website refuses to load inside an iframe, changing the HTML iframe code usually cannot override the website security policy.

Best Practices

Use iframes only when embedded content is genuinely required.
Use the <iframe> element for supported embedded documents.
Always provide a valid src attribute.
Use correct relative paths for local documents.
Use provider-supported embed URLs for external services.
Do not assume that every webpage can be embedded.
Always provide a meaningful title attribute.
Describe the purpose of the embedded content in the title.
Avoid generic titles such as "iframe".
Use unique titles when multiple iframes appear on one page.
Use loading="lazy" for non-critical below-the-fold iframes.
Do not lazy-load important content that must appear immediately.
Use responsive dimensions.
Avoid fixed widths that overflow mobile screens.
Use width: 100% when appropriate.
Use max-width to prevent excessive expansion.
Choose an appropriate aspect ratio for video embeds.
Test iframe layouts on mobile devices.
Test iframe layouts on tablets.
Test iframe layouts on desktop screens.
Only embed content from trusted sources.
Prefer secure HTTPS resources.
Avoid embedding unknown or suspicious webpages.
Use the sandbox attribute when additional restrictions are appropriate.
Grant sandbox permissions only when required.
Use the allow attribute carefully for requested browser features.
Avoid granting unnecessary capabilities.
Understand that cross-origin iframe access is restricted.
Do not attempt to manipulate cross-origin iframe documents directly.
Use postMessage when controlled cross-origin communication is required.
Validate message origins when using postMessage.
Avoid excessive numbers of iframes on one page.
Remember that every iframe can load additional resources.
Monitor performance when embedding heavy applications.
Use lazy loading to reduce unnecessary initial work.
Provide fallback links when important embedded content may fail.
Explain important embedded content with surrounding text.
Do not rely on iframe content alone for critical information.
Ensure users understand what external content they are interacting with.
Test keyboard navigation.
Test screen reader behavior.
Avoid keyboard traps inside embedded content.
Use clear headings before important embedded content.
Consider privacy implications of third-party embeds.
Understand that third-party embeds may load external cookies or trackers.
Use privacy-friendly embed options when available.
Review the external provider terms before embedding content.
Do not embed copyrighted content without permission.
Keep external dependencies documented.
Test what happens when the external service is unavailable.
Avoid placing critical application functionality entirely inside uncontrolled third-party iframes.
Use provider-generated embed code when available.
Keep iframe code readable and properly formatted.
Use clear source URLs.
Remove unnecessary iframe attributes.
Use meaningful surrounding content.
Test security policies before deployment.
Test Content Security Policy requirements when applicable.
Keep embedded integrations updated.
Remove unused embeds.
Always balance convenience, accessibility, security, privacy, and performance.

Better Responsive Iframe Example

<div style="max-width: 900px;">
    <iframe
        src="https://example.com/embed"
        title="Interactive Course Demonstration"
        loading="lazy"
        style="
            width: 100%;
            aspect-ratio: 16 / 9;
            border: 0;
        "
    >
    </iframe>
</div>

Iframe with Sandbox Restrictions

<iframe
    src="https://example.com/embed"
    title="External Application"
    loading="lazy"
    sandbox
>
</iframe>

Sandbox Changes Capabilities

The sandbox attribute applies restrictions to iframe content. Additional permissions should only be added when the embedded application genuinely requires them.

Frequently Asked Questions

What does iframe mean?

Iframe means Inline Frame.

What is an iframe?

An iframe is an HTML element that displays another document inside the current webpage.

Which HTML element creates an iframe?

The <iframe> element creates an inline frame.

Which attribute specifies the page to display?

The src attribute specifies the document or embed URL.

Can an iframe display another local HTML page?

Yes. A relative path can be used to display another HTML document from the same project.

Can an iframe display an external website?

Only when the external website allows itself to be embedded.

Why do some websites refuse to load inside iframes?

Websites can use security policies such as X-Frame-Options or Content Security Policy frame-ancestors rules to control embedding.

What does the title attribute do?

The title attribute provides an accessible description of the iframe content.

Should every iframe have a title?

Meaningful iframe content should have an accessible name, and the title attribute is a common way to provide it.

What does loading="lazy" do?

It allows the browser to defer loading an off-screen iframe until it approaches the viewport.

What does loading="eager" do?

It tells the browser to load the iframe immediately.

Can YouTube videos be embedded with iframes?

Yes. YouTube provides dedicated embed URLs and generated iframe code.

Can Google Maps be embedded with iframes?

Yes. Google Maps provides embed code for supported map views.

Why does a normal YouTube URL not work as expected in an iframe?

The normal watch page and the dedicated embed URL serve different purposes. Use the provider embed URL.

Can iframes be responsive?

Yes. CSS can make an iframe adapt to the available width and maintain an appropriate aspect ratio.

Why does my iframe overflow on mobile?

Fixed dimensions may be wider than the mobile viewport. Use responsive CSS.

Do iframes affect performance?

Yes. Each iframe can load another document and additional resources.

Should every iframe use lazy loading?

No. Important content that must load immediately may use eager loading, while below-the-fold content is often suitable for lazy loading.

What is the sandbox attribute?

The sandbox attribute applies additional restrictions to the embedded document.

Can JavaScript access content inside every iframe?

No. Browser same-origin security rules restrict access to cross-origin iframe content.

Can the main page communicate with a cross-origin iframe?

Controlled communication can use the postMessage API when both sides are implemented securely.

Can iframe content improve the main page SEO?

Embedded content is a separate document and should not be treated as a replacement for important content in the main page.

Are iframes secure?

Iframes can be used safely, but developers should embed trusted sources, apply appropriate restrictions, and avoid unnecessary permissions.

Can an iframe embed a PDF?

PDF viewing depends on browser and platform support, but documents can also be embedded through supported document viewers.

What should I learn after HTML Iframes?

The next lesson is HTML SVG, where you will learn how scalable vector graphics work inside webpages.

Key Takeaways

Iframe stands for Inline Frame.
The <iframe> element embeds another document inside the current webpage.
The embedded document has its own browsing context.
The src attribute specifies the document or embed URL.
Local HTML documents can be embedded using relative paths.
External services may provide dedicated embed URLs.
Not every website allows iframe embedding.
Websites can block embedding through security policies.
The width attribute controls displayed width.
The height attribute controls displayed height.
Responsive CSS is usually better for modern layouts.
The title attribute provides an accessible description.
Iframe titles should describe the embedded content.
Generic iframe titles should be avoided.
The loading attribute controls loading behavior.
loading="lazy" can defer off-screen iframe loading.
loading="eager" loads the iframe immediately.
Lazy loading can improve initial page performance.
YouTube videos can be embedded using dedicated embed URLs.
Google Maps can provide iframe embed code.
Normal webpage URLs are not always valid embed URLs.
Iframes are commonly used for videos, maps, documents, and widgets.
Each iframe can add network and rendering work.
Too many iframes can harm performance.
Iframe content should come from trusted sources.
HTTPS sources should be preferred.
The sandbox attribute can apply additional restrictions.
Cross-origin iframe access is restricted by browser security rules.
Responsive iframe layouts should be tested on mobile devices.
Important content should not depend entirely on an iframe.
External iframe content creates a dependency on another service.
Third-party embeds can have privacy implications.
Accessibility must be considered for embedded content.
Security, privacy, performance, and usability should all be considered before adding an iframe.

Summary

The HTML <iframe> element allows another webpage or document to be displayed inside the current webpage.

Iframe stands for Inline Frame because it creates an embedded frame within the normal flow of the webpage.

The src attribute specifies the document or embed URL that the browser should load.

Iframes can display local HTML pages as well as external content from services that explicitly allow embedding.

Common iframe use cases include hosted videos, interactive maps, online documents, dashboards, forms, calendars, and third-party widgets.

The title attribute provides important accessibility information by describing the purpose of the embedded content.

The loading attribute can improve performance by allowing non-critical off-screen iframes to load lazily.

External services such as video and map platforms often provide dedicated embed URLs rather than using their normal webpage URLs.

Not every website can be embedded because website owners can use browser security policies to prevent their pages from appearing inside iframes.

Iframes should be responsive so they work correctly on mobile, tablet, and desktop screens.

Developers should avoid excessive iframe usage because every frame can load another document and additional resources.

External content should come from trusted sources, and additional restrictions such as sandboxing should be considered when appropriate.

By using iframes carefully, developers can integrate useful external experiences while maintaining accessibility, security, privacy, responsiveness, and performance.

In the next lesson, you will learn about HTML SVG and how scalable vector graphics can be created and displayed directly inside webpages.

Next Lesson →