How to Use Iframe in HTML

Use an <iframe> when you need to display another web page, tool, map, video, or external document inside your current page. This works well for embeds like YouTube videos, Google Maps, dashboards, and support widgets.

What you’ll build or solve

You’ll learn how to use an iframe in HTML by setting the source URL and size. You’ll also know when iframes are the right choice and when another embed method is cleaner.

When this approach works best

This approach is the right choice when external content should stay visible inside your page.

Common real-world scenarios include:

• Embedded YouTube videos
• Google Maps locations
• Payment widgets
• Analytics dashboards
• Help center chat tools

This is a bad idea when the embedded content blocks interaction, loads slowly, or is available as a native HTML component.

Prerequisites

You only need:

• A basic HTML file
• A valid embeddable URL
• A text editor
• Basic HTML knowledge

Step-by-step instructions

Step 1: Add the <iframe> tag with a source URL

Use the src attribute to point to the page or tool you want to embed.

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

To make the embed easier to use, add a descriptive title.

<iframe
  src="https://www.example.com"
  width="800"
  height="450"
  title="Support dashboard">
</iframe>

What to look for:

• src controls what loads inside the frame
• width and height control the visible size
• title improves accessibility
• Use URLs that allow embedding
• Keep the iframe large enough for the content inside it

Examples you can copy

Website preview

<iframe
  src="https://www.bbc.com"
  width="700"
  height="400"
  title="News preview">
</iframe>

Analytics dashboard

<iframe
  src="https://dashboard.example.com"
  width="900"
  height="500"
  title="Analytics dashboard">
</iframe>

Support widget

<iframe
  src="https://help.example.com"
  width="400"
  height="600"
  title="Customer support">
</iframe>

Common mistakes and how to fix them

Mistake 1: Using a URL that blocks embedding

What the reader might do:

<iframe
  src="https://www.google.com">
</iframe>

Why it breaks: many sites block iframe usage with security headers, so the content never loads.

Corrected approach:

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  width="640"
  height="360"
  title="Video tutorial">
</iframe>

Use pages or services that explicitly support embedding.

Mistake 2: Forgetting width and height

What the reader might do:

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

Why it breaks: the iframe may render with awkward default sizing.

Corrected approach:

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

Mistake 3: Leaving out the title

What the reader might do:

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

Why it breaks: screen readers have less context about what the embedded content contains.

Corrected approach:

<iframe
  src="https://www.example.com"
  width="800"
  height="450"
  title="Product dashboard">
</iframe>

Troubleshooting

If the iframe stays blank, check whether the source website allows embedding.

If the content looks cut off, increase the width or height.

If the frame loads the wrong content, confirm the src URL.

If the iframe hurts accessibility, add a clear title.

Quick recap

• Use <iframe> to embed external content
• Set the src URL
• Add width and height
• Include a descriptive title
• Use only URLs that allow embedding