Is the iframe tag supported in all browsers?

Yes. iframe is a core HTML element with universal browser support, including legacy Internet Explorer.

HTML <iframe> Tag

Q: What is the HTML iframe tag used for?

The iframe element embeds another HTML page or widget inside the current document, creating a nested browsing context. Common uses include maps, video players, payment forms, and third-party widgets.

Q: What is the difference between iframe and embed?

iframe nests a full HTML browsing context such as a web page or widget. embed is a void element for inserting external media files like PDFs directly. Use audio and video tags for native media playback when possible.

Q: Is frameborder still valid on iframe?

No. The frameborder attribute is obsolete in HTML. Remove borders with CSS using border: none on the iframe element instead.

Q: Why does iframe need a title attribute?

The title attribute describes the embedded content for screen reader users. Without it, assistive technologies cannot tell users what the iframe contains.

Q: What does the sandbox attribute do?

sandbox restricts what the embedded page can do, such as blocking scripts or form submission. Use it when embedding untrusted or partially trusted content to reduce security risks.

Beginner

⏱️ 6 min read

📚 Updated: Jun 2026

🎯 3 Examples

Embedding & Media

HTML iframe tag tutorial — embed maps, videos, and external pages

Overview

What You’ll Learn

By the end of this tutorial, you’ll embed external content — maps, videos, and web pages — using the <iframe> element safely and accessibly.

The <iframe> (inline frame) tag is a powerful HTML tool for integrating third-party content into your pages. This guide covers syntax, attributes, security, accessibility, and best practices for beginners and web developers alike.

Core Syntax

Set src, dimensions, and a descriptive title.

Embed Maps & Video

Integrate Google Maps, YouTube, and other widgets.

iframe vs embed

Choose the right element for pages vs media files.

Security

Use sandbox and trusted sources to reduce risk.

CSS Styling

Control borders, sizing, and responsive layout with CSS.

Accessibility

Add titles, fallback content, and keyboard-friendly embeds.

Fundamentals

What Is the `<iframe>` Tag?

The inline frame element (<iframe>) embeds another HTML document inside the current page, creating a nested browsing context. It is commonly used for maps, video players, social feeds, payment forms, and other third-party widgets.

💡

A page inside your page

An iframe loads a separate document with its own URL. The embedded content runs in its own context, which is why security and accessibility attributes matter.

Unlike obsolete frame and frameset tags, iframe works inside a normal HTML5 document body. It remains one of the standard ways to embed external interactive content today.

Foundation

📝 Syntax

Point the src attribute at the URL you want to embed and set dimensions plus a descriptive title:

syntax.html

<iframe
  src="https://example.com/embed"
  title="Description of embedded content"
  width="600"
  height="400"
  loading="lazy"
></iframe>

Syntax Rules

src is required — it specifies the URL of the embedded document.
Always include a title attribute describing the embedded content for accessibility.
Set width and height (or use CSS) so layout does not jump while loading.
Do not use obsolete frameborder — remove borders with CSS (border: none).
Provide fallback content between the opening and closing tags for browsers that cannot render iframes.

Cheat Sheet

⚡ Quick Reference

Use Case	Code Snippet	Notes
Basic embed	`<iframe src="..." title="..."></iframe>`	Nested browsing context
Google Maps	`src="maps.google.com/embed?..."`	Use embed URL from Maps share dialog
YouTube video	`src="youtube.com/embed/VIDEO_ID"`	Add `allow` permissions
Lazy loading	`loading="lazy"`	Defers off-screen iframes
Security	`sandbox=""`	Restrict embedded page capabilities
Remove border	`CSS: border: none;`	Replaces obsolete frameborder

Comparison

⚖️ `<iframe>` vs `<embed>`

Both insert external content, but they serve different purposes:

Feature	<iframe>	<embed>
Element type	Container with closing tag	Void element
Typical content	HTML pages, maps, widgets	Media files, PDFs
Nested browsing context	Yes — separate document	No
Key attributes	`src`, `title`, `sandbox`	`src`, `type`

Comparison

⚖️ `<iframe>` vs obsolete `<frame>`

Modern pages use iframe inside a normal document. Obsolete framesets split the entire window:

Feature	<iframe> (modern)	<frame> (obsolete)
Status	Valid HTML5	Obsolete — do not use
Placement	Anywhere in the page body	Inside `frameset` only
Layout	CSS grid/flex with iframes	Fixed window panes
Accessibility	`title` + fallback content	Poor navigation for assistive tech

Reference

🧰 Attributes

Key <iframe> attributes plus global attributes such as class and id:

src Required

URL of the document or embed widget to load inside the frame.

src="https://example.com"

title Required

Accessible name describing the embedded content for screen readers.

title="Map of London"

width / height Layout

Dimensions in pixels or CSS units to reserve space before content loads.

width="560" height="315"

allow Permissions

Feature policy for fullscreen, autoplay, camera, microphone, and more.

allow="fullscreen"

sandbox Security

Restricts scripts, forms, and navigation in untrusted embedded content.

sandbox=""

loading Performance

Defer loading off-screen iframes with loading="lazy".

loading="lazy"

attributes.html

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video player"
  width="560"
  height="315"
  loading="lazy"
  allow="fullscreen"
  allowfullscreen
></iframe>

Avoid obsolete frameborder. Use CSS border: none; instead. Match allow permissions to what the embedded widget actually needs.

Hands-On

Examples Gallery

Google Maps, YouTube video, and basic iframe patterns with copy-ready code and live previews.

Live Preview

Embedded YouTube video player (requires network access):

Embedding Google Maps

Embed an interactive map to show location details and improve user engagement.

embedding-google-maps.html

<iframe
  src="https://www.google.com/maps/embed?pb=..."
  title="Map of London, UK"
  width="600"
  height="450"
  loading="lazy"
  allowfullscreen
></iframe>

Try It Yourself

📚 Common Use Cases

Use <iframe> to integrate maps, video players, social widgets, payment forms, and documentation previews. For your own video and audio files, prefer <video> and <audio> with native controls.

Embedding YouTube Video

Integrate multimedia content by embedding a YouTube player directly in your page.

embedding-youtube-video.html

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video player"
  loading="lazy"
  allow="fullscreen"
  allowfullscreen
></iframe>

Try It Yourself

Basic iframe with Fallback

Modern syntax with title, lazy loading, and fallback content for unsupported browsers.

basic-iframe.html

<iframe
  src="https://example.com"
  title="Example website preview"
  width="480"
  height="200"
  loading="lazy"
>
  <p>Your browser does not support iframes.
    <a href="https://example.com">Visit example.com</a>.
  </p>
</iframe>

Try It Yourself

Design

Styling <iframe> with CSS

Replace obsolete frameborder with CSS. Make iframes responsive with max-width and aspect-ratio:

border: none Remove default border

max-width: 100% Responsive sizing

aspect-ratio 16:9 video embeds

border-radius Rounded corners

iframe-styles.css

/* Remove obsolete frameborder — use CSS instead */
iframe {
  border: none;
  display: block;
  max-width: 100%;
}

iframe.video-embed {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}

iframe.map-embed {
  width: 100%;
  min-height: 280px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}

Responsive video embed styling

A11y

♿ Accessibility

Embedded content must remain usable for all visitors:

Always set title — describe what the iframe contains so screen reader users understand its purpose.
Provide fallback content — include a link to the embedded resource between the iframe tags.
Ensure keyboard access — verify embedded widgets support keyboard navigation where required.
Don’t trap focus — test tab order when multiple iframes or modals are on the page.

🧠 How <iframe> Works

Author sets src and title

Point src at the embed URL and describe the content with title.

Markup

Browser loads nested document

The browser fetches and renders the external page inside a separate browsing context.

Rendering

User interacts with embedded content

Maps, videos, and forms inside the iframe run independently from the parent page.

Interaction

Rich embedded experience

External content appears seamlessly within your page layout.

Compatibility

Universal Browser Support

The <iframe> element is fully supported in all browsers, including legacy Internet Explorer.

✓ Baseline · Since HTML 4

Embedded content that works everywhere

From legacy Internet Explorer to the latest mobile browsers — the iframe element is fully supported for nesting external documents.

100% Core tag support

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

<iframe> tag 100% supported

Bottom line: Ship embedded widgets with confidence. The <iframe> element is safe to use in every production environment today.

Wrap Up

Conclusion

Mastering the <iframe> tag lets you seamlessly integrate maps, videos, widgets, and external pages into your site. Set dimensions, add a descriptive title, and follow security best practices for a dynamic user experience.

Remember to replace obsolete frameborder with CSS, choose iframe over obsolete frame, and prefer native video and audio tags for your own media files.

View Examples Gallery Try Google Maps embed

Pro Tips

💡 Best Practices

✅ Do

Set width, height, and title on every iframe
Use CSS border: none instead of frameborder
Apply loading="lazy" for below-the-fold embeds
Embed content only from trusted sources

❌ Don’t

Omit the title attribute
Embed untrusted pages without sandbox restrictions
Use iframe for your own video files — use video instead
Load dozens of heavy iframes on one page without lazy loading

Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about `<iframe>`

Bookmark these before you ship — they’ll keep your embeds secure and accessible.

Core concepts

🔗 01

Nested Document

<iframe> loads a separate page inside yours.

Foundation

📝 02

title Is Required

Describe embedded content for screen reader users.

Accessibility

⚖️ 03

Not the Same as embed

iframe = HTML page; embed = media file.

Comparison

🔒 04

Use sandbox

Restrict untrusted embedded content with sandbox.

Security

🎨 05

CSS Over frameborder

Remove borders with CSS, not obsolete attributes.

Modern HTML

✓ 06

Universal Support

Works in every browser, including legacy IE.

Compatibility

❓ Frequently Asked Questions

What is the HTML iframe tag used for?

It embeds another HTML page or widget inside the current document — maps, video players, forms, and third-party content.

What is the difference between iframe and embed?

iframe nests a full HTML browsing context. embed inserts external media files like PDFs directly.

Is frameborder still valid on iframe?

No. Use CSS border: none; instead. The frameborder attribute is obsolete in HTML.

Why does iframe need a title attribute?

Screen readers use title to announce what the embedded content is. Without it, users cannot identify the iframe.

What does the sandbox attribute do?

It restricts what the embedded page can do — such as running scripts or submitting forms — to reduce security risks.

Practice Embedding Content

Embed maps, videos, and external pages in the interactive HTML editor.

Try YouTube embed →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

HTML i Tag HTML image Tag

HTML <iframe> Tag

What You’ll Learn

Core Syntax

Embed Maps & Video

iframe vs embed

Security

CSS Styling

Accessibility

What Is the <iframe> Tag?

📝 Syntax

Syntax Rules

⚡ Quick Reference

⚖️ <iframe> vs <embed>

⚖️ <iframe> vs obsolete <frame>

🧰 Attributes

Examples Gallery

Live Preview

Embedding Google Maps

📚 Common Use Cases

Embedding YouTube Video

Basic iframe with Fallback

Styling <iframe> with CSS

♿ Accessibility

🧠 How <iframe> Works

Author sets src and title

Browser loads nested document

User interacts with embedded content

Rich embedded experience

Universal Browser Support

Embedded content that works everywhere

Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Six truths every developer should know about <iframe>

Nested Document

title Is Required

Not the Same as embed

Use sandbox

CSS Over frameborder

Universal Support

❓ Frequently Asked Questions

🧩 Related HTML Topics

HTML <i> Tag

HTML image Tag

HTML <embed> Tag

Try YouTube embed

Practice Embedding Content

About the author

What Is the `<iframe>` Tag?

⚖️ `<iframe>` vs `<embed>`

⚖️ `<iframe>` vs obsolete `<frame>`

Six truths every developer should know about `<iframe>`