🪟 Intermediate HTML

Iframes

⏱ 1 hr2 topicsLive playground
🎯 By the end: You can embed external content with an iframe, give it a title for accessibility, and apply the sandbox and lazy-loading attributes to keep it safe and fast.

An <iframe> (inline frame) is a window in your page that shows another whole web page inside it. It's how you drop a YouTube video, a Google Map, or a payment widget into your site without rebuilding it. Powerful — and worth handling with a little care.

1Embedding a page

Point an iframe at a URL with src, and size it with width and height:

<iframe src="https://example.com"
        width="100%" height="300"
        title="Example site"></iframe>
Always add a title. Screen-reader users hear the title to know what the frame contains — without it they just hear "frame", which is useless. It's the most-skipped iframe accessibility step.

Most embeds (YouTube, Google Maps) give you a ready-made iframe snippet to copy. You usually only tweak its width, height and title.

An iframe embedding another page
HTML
CSS
Live preview
What's happening: The iframe is a window showing a completely separate little page (here, a tiny inline data page). The same idea embeds a YouTube video or a map — just change the src to their URL.
Key points
  • <iframe src="…"> embeds another page as a window inside yours.
  • Size it with width and height.
  • Always add a title so screen-reader users know what the frame contains.

2Keep iframes safe and fast

Because an iframe runs someone else's page inside yours, two attributes matter:

  • loading="lazy" — don't load the frame until the user scrolls near it. Embeds are heavy; this is a big speed win, especially on mobile data.
  • sandbox — restrict what the embedded page can do (run scripts, submit forms, open pop-ups). You then opt back in only what's needed, e.g. sandbox="allow-scripts". An empty sandbox is the most locked-down.
Fun fact: the live playground you've been using on Vidaara is itself a sandboxed iframe — that's exactly why your code can run safely without affecting the rest of the page.

Only embed sources you trust, and prefer https:// URLs so the connection is encrypted.

Key points
  • loading="lazy" defers heavy embeds until needed — a real speed win.
  • sandbox restricts what the embedded page can do; opt back in only what's necessary.
  • Only embed trusted sources, and prefer https:// URLs.

★ Practical: a safe embed

Write the markup (in any playground) for:

  1. An <iframe> with a src, a percentage width and a fixed height.
  2. A descriptive title attribute.
  3. Add loading="lazy" so it loads only when scrolled into view.
  4. Add a sandbox attribute to lock it down.

Ready to test yourself?

Take the short quiz. Score 60% or more to mark this lesson complete.

Start the quiz →

💡 Log in to save your progress and earn the certificate.

← Previous
Audio & Video
Next →
Accessibility (a11y)