🖼️

You're About to Finish Phase 6!

This is the last lesson in Images & Media. After this, you'll unlock Phase 7: Tables.

🖥️ Phase 6 · Images & Media🟡 IntermediateMODULE 22

iframes

⏱️ 15 min read

📖 Theory + Code

🧩 5 Quiz Questions

🏗️ 1 Challenge

Course progress63%

🎯 What you'll learn: Embedding entire external pages with <iframe> — maps, documents, widgets — plus the security-critical sandbox attribute.

Section 1

iframe Embeds an Entire Page

Unlike <img> or <video>, <iframe> embeds a whole separate, interactive HTML document inside your page — a Google Map, a PDF viewer, a payment widget, or another site entirely.

iframe-basic.html

HTML

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

Section 2

The sandbox Attribute — Security

Embedding a third-party page is a real security surface — that page could try to run scripts, submit forms, or navigate your top-level window. sandbox restricts what the embedded page is allowed to do, by default blocking everything until you explicitly allow it back.

iframe-sandbox.html

HTML

<!-- Maximum restriction: blocks scripts, forms, popups, everything -->
<iframe src="untrusted-widget.html" sandbox title="Widget"></iframe>

<!-- Allow specific capabilities back, one at a time -->
<iframe src="widget.html"
        sandbox="allow-scripts allow-same-origin"
        title="Widget"></iframe>

sandbox value	Allows
`allow-scripts`	JavaScript execution inside the iframe
`allow-forms`	Form submission from inside the iframe
`allow-popups`	Opening new windows/tabs from the iframe
`allow-same-origin`	Treating the content as same-origin (needed for many widgets to function)

⚠️

Only embed sources you trust

sandbox reduces risk, but the safest policy is still only embedding iframes from sources you trust — your own content, or well-known reputable services (Google Maps, YouTube, payment processors).

Section 3

loading="lazy" for iframes

Just like images, iframes support loading="lazy" — a real performance win for embeds that sit below the initial viewport, like a map at the bottom of a contact page.

iframe-lazy.html

HTML

<iframe src="map.html" loading="lazy"
        width="600" height="400"
        title="Location map"></iframe>

Section 4

Every iframe Needs a title

Like YouTube embeds, every <iframe> should have a descriptive title so screen reader users know what the embedded frame contains — "Widget" is much less useful than "Customer feedback form."

💡

iframe recap

You've now used iframe for YouTube embeds and general external content. Same element, same rules: always set title, prefer loading="lazy" below the fold, and apply sandbox for anything not fully trusted.

🧩 Knowledge Check — Lesson 22

5 questions to test your iframe knowledge.

1. What does <iframe> embed?

2. What does the sandbox attribute do?

3. What does sandbox="allow-scripts" do specifically?

4. Should iframes support lazy loading like images?

5. What's the safest overall policy for embedding third-party iframes?

💪

Coding Challenge — Lesson 22

Apply what you learned · Intermediate Level

Challenge: Build a Sandboxed Contact Page Map

1. Add an iframe embedding a map, with a descriptive title.
2. Add loading="lazy" since it's below the fold.
3. Add sandbox="allow-scripts allow-same-origin" to restrict it appropriately.

💡 Show hints if you're stuck

Full example: <iframe src="map.html" title="Office location" loading="lazy" sandbox="allow-scripts allow-same-origin" width="600" height="400"></iframe>

Finished this lesson?

Mark it complete to track your progress.

Module 22 of 62Phase 6 — Images & Media

iframes

iframe Embeds an Entire Page

The sandbox Attribute — Security

loading="lazy" for iframes

Every iframe Needs a title

Phase 6 Complete!