Techie BabajiLearn to Code. Build Real Skills.
HTML · Modern HTML

Iframes

An iframe is a window in your page that shows another web page. It is how you embed a YouTube video, a Google Map or a payment widget.

Intermediate 5 min Lesson 16 of 22 Runnable examplesFollows the WHATWG HTML Living Standard.
Before you start:Attributes
0/22 in HTML
On this page · 5 min · Intermediate

On this page

  1. Learning objectives
  2. Explanation
  3. Syntax
  4. Code example
  5. Step by step
  6. Real-world use
  7. Common mistakes
  8. Best practices
  9. Remember this
  10. Practice exercise
  11. Mini quiz
  12. Related topics
  13. My notes
Reading time
5 min
Difficulty
Intermediate
Updated
Oct 28, 2026

Related tutorials

Interview questions

Learning objectives#

  • Embed content with <iframe>
  • Make iframes accessible with title
  • Restrict embedded pages with sandbox
  • Make iframes responsive

Explanation#

<iframe src="URL"> loads a full web page inside a rectangle on your page. Each iframe is its own separate page with its own scripts.

Always give an iframe a title describing its content — screen readers announce it.

sandbox applies strict restrictions (no scripts, no forms, no pop-ups). You then add back only what is needed, e.g. sandbox="allow-scripts".

loading="lazy" delays off-screen iframes. allow="fullscreen" grants specific features to the embedded page.

Many sites refuse to be embedded (they send an X-Frame-Options or CSP header) to protect users from click-jacking.

Syntax#

HTML Illustrative
<iframe src="https://example.com" title="Description" width="600" height="400" loading="lazy"></iframe>

Code example: Responsive embedded map and sandboxed page#

HTMLResponsive embedded map and sandboxed page Runnable
<style>
  .embed { aspect-ratio: 16 / 9; width: 100%; max-width: 560px; border: 0; }
</style>


<iframe class="embed"
  src="https://www.openstreetmap.org/export/embed.html?bbox=77.20,28.60,77.24,28.63&layer=mapnik"
  title="Map of central New Delhi"
  loading="lazy"></iframe>


<iframe sandbox title="Sandboxed example"
  srcdoc="<h3>I am inside a sandbox</h3><script>document.write('scripts are blocked')</script>"
  width="300" height="100"></iframe>
Expected output
A responsive map of New Delhi and a small framed box showing only the heading, because its script was blocked by the sandbox.
Opens this example in the full playground

Step-by-step explanation#

  1. aspect-ratio: 16 / 9 with width: 100% makes the iframe scale on any screen.
  2. title describes the map for screen-reader users.
  3. loading="lazy" saves bandwidth if the map is far down the page.
  4. srcdoc puts HTML directly into the iframe instead of loading a URL.
  5. The empty sandbox attribute blocks the script inside, so only the heading appears.

Real-world use case#

Contact pages embed maps; blogs embed YouTube videos; this site runs your code examples inside sandboxed iframes so they cannot touch your account.

Common mistakes#

Embedding untrusted pages without sandbox

An embedded page can run scripts and open pop-ups. Use sandbox and add back only the permissions you need.

Fixed width iframes on mobile

width="800" overflows phones. Use width: 100% with aspect-ratio in CSS.

Expecting any site to load

Banks, Google Search and many others block framing. A blank iframe usually means the site refuses to be embedded.

Best practices#

  • Always add a title
  • Use sandbox for any third-party or user content
  • Lazy-load iframes below the fold
  • Never combine allow-scripts and allow-same-origin for untrusted content — it cancels the sandbox

Remember this#

iframe = a window into another web page.

sandbox = “lock everything”, then allow-* to unlock one thing at a time.

title on every iframe — “what is in this window?”

Practice exercise#

Your task: Embed https://example.com in a responsive, lazy-loaded iframe with a title, allowing scripts but nothing else.

Need a hint?
sandbox="allow-scripts" plus aspect-ratio CSS.
Show solution
HTML Runnable
<iframe src="https://example.com" title="Example Domain homepage"
        sandbox="allow-scripts" loading="lazy"
        style="width:100%; aspect-ratio:4/3; border:1px solid #ccc"></iframe>
Opens this example in the full playground

Mini quiz#

Iframes quizMultiple choice Question 1 of 3

What does an empty sandbox attribute do?

Score so far: 0/0

Want more? Practise all HTML MCQs · HTML interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.