HTML Iframes

Embed videos, maps and other web pages inside your page.

Lesson 28 of 44Intermediate11 min read

An iframe (inline frame) is a window into another web page, placed inside your page. It's how sites embed YouTube videos, Google Maps, music players and live code demos. The result panels in the examples on Codevra are iframes too.

The content inside an iframe is a completely separate page with its own HTML, CSS and JavaScript. Your page decides where the window goes and how big it is, but it doesn't control what happens inside. That separation is what makes embedding safe and simple, and it's also why iframes need a little care.

Basic iframe syntax

HTML
<iframe src="https://example.com" width="600" height="400" title="Example website"></iframe>
  • src is the page to show inside the frame.
  • width and height set the size of the window.
  • title describes the embedded content for screen-reader users. Always add it.

Unlike <img>, <iframe> needs a closing tag.

How to get embed code

You rarely write iframes from scratch. Most services give you ready-made code:

  • YouTube: Share → Embed → copy the <iframe> code.
  • Google Maps: Share → Embed a map → copy the HTML.
  • Music players, code playgrounds and design tools have similar "Embed" buttons.

Paste the code into your page, then add a meaningful title and loading="lazy". Embed codes often include a fixed width, so you may also want to make the frame responsive with CSS, for example with width: 100% and aspect-ratio: 16 / 9.

Iframe safety and performance

  • loading="lazy" waits to load the frame until the visitor scrolls near it. Embeds are heavy, so this can make a page much faster.
  • sandbox restricts what the embedded page can do. An empty sandbox blocks scripts, forms and pop-ups. You can add permissions back one by one, such as sandbox="allow-scripts".
  • allow grants features such as fullscreen or autoplay.
  • Some sites, including banks and search engines, refuse to be shown inside a frame for security reasons. You'll see a blank box or an error message, and that's intentional.

When not to use an iframe

Iframes are for content that lives on another site or needs to be kept separate. They are not a good way to reuse your own header or footer across pages. Each iframe is a full page load, search engines treat its content as belonging to the other page, and the frame can't easily resize to fit its content. For shared parts of your own site, a template system or build tool is the usual answer.

HTML Iframe Syntax

Iframe syntax

<iframe src="URL" title="Description" width="560" height="315" loading="lazy"></iframe>

HTML Iframe Summary

  • An <iframe> displays another web page inside yours.
  • Always set src, a size and a descriptive title.
  • Copy embed code from services like YouTube and Google Maps, then add loading="lazy".
  • Use sandbox and allow to control what embedded content can do.
  • Only embed trusted sources, and don't use iframes to share parts of your own site.

HTML Iframe Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

An embedded map

This uses OpenStreetMap, which allows embedding.

<h3>Find our shop</h3>
<iframe
  src="https://www.openstreetmap.org/export/embed.html?bbox=-0.1300%2C51.5050%2C-0.1200%2C51.5100&layer=mapnik"
  width="400" height="250"
  title="Map showing our shop near Trafalgar Square, London"
  loading="lazy">
</iframe>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 2 to 7The src is the embed URL given by the map site.
  2. Line 4The size of the frame in pixels.
  3. Line 5A specific title tells screen-reader users what's inside the frame.
  4. Line 6Lazy-loading delays this heavy embed until it's needed.
Example 2

Embedding your own mini page with srcdoc

srcdoc puts HTML straight into the frame instead of loading a URL. This is how the result panels on Codevra work.

<p>Here's a page inside a page:</p>
<iframe
  title="Mini greeting card"
  width="300" height="120"
  srcdoc="<body style='font-family:sans-serif;background:#fff1c2;text-align:center'><h2>Happy birthday!</h2></body>">
</iframe>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 5srcdoc holds a complete little HTML document. Single quotes inside, double quotes outside.

Common HTML Iframe Mistakes

No title

Don't
<iframe src="https://www.youtube.com/embed/abc123"></iframe>
Do
<iframe src="https://www.youtube.com/embed/abc123" title="Video: How to bake sourdough bread"></iframe>

Without a title, screen readers just say "frame", leaving users guessing.

Using the normal page URL instead of the embed URL

Don't
<iframe src="https://www.youtube.com/watch?v=abc123" title="Video"></iframe>
Do
<iframe src="https://www.youtube.com/embed/abc123" title="Video"></iframe>

Many sites block their normal pages from being framed. Always use the special embed URL from the site's Share → Embed option.

HTML Iframe in Real Projects

Where you see iframes

YouTube players on news articles, maps on "Contact us" pages, payment forms from Stripe or PayPal (isolated in an iframe for security), social media posts and online code editors like the ones on this site. For video files you host yourself, use <video> instead.

HTML Iframe Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Complete the iframe so it's accessible and lazy-loaded.

<iframe src="https://example.com/widget" ="Weather widget" loading=""></iframe>
Multiple choiceeasy

Does <iframe> need a closing tag?

Multiple choicemedium

What does an empty sandbox attribute do?

Fix the bugmedium

Fix this iframe: it's missing a title and has no closing tag.

<iframe srcdoc="<h1>Hello from inside!</h1>" width="300" height="100">
<p>After the frame</p>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The iframe has a title
  • The paragraph is outside the iframe

HTML Iframe Quiz

3 questions to check what you learned.

  1. What is an iframe used for?

    • Embedding another web page inside yours
    • Drawing frames around images
    • Making forms
    • Adding borders

  2. Why should you add title to an iframe?

    • It changes the browser tab title
    • It tells screen-reader users what the frame contains
    • It's required for it to load
    • It shows a tooltip only

  3. Some websites appear blank when put in an iframe. Why?

    • Iframes only show images
    • The width is too small
    • Iframes don't support HTTPS
    • Those sites send security headers that forbid being framed

HTML Iframe Challenge

A tiny embedded postcard

Use srcdoc to embed a mini page:

  1. An iframe with title="Postcard", width="320" and height="160"
  2. Its srcdoc contains an <h2> and a <p>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Iframe titled "Postcard"
  • Size is 320×160
  • srcdoc has an h2 and a p

Related HTML topics

32Audio & VideoPlay video and sound natively with controls, posters and captions.38AccessibilityBuild pages everyone can use, including screen-reader and keyboard users.15ImagesAdd pictures with img, write great alt text and keep pages fast.
Esc
↑↓ to navigateEnter to open