Iframe

1. Introduction

An iframe (inline frame) embeds another webpage or external content inside your page. You have seen iframes in action every time you see an embedded YouTube video, a Google Map, or a live code demo on a tutorial site.

The embedded content is completely separate from your page — it runs in its own isolated browsing context.

2. Theory

Basic Syntax

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

Important Attributes

Attribute	Purpose
`src`	URL of the page to embed
`width` / `height`	Dimensions in pixels or percentage
`title`	Describes the iframe content — required for accessibility
`allow`	Permissions: camera, microphone, fullscreen, payment
`allowfullscreen`	Allows the iframe to go fullscreen (needed for video)
`loading="lazy"`	Defers loading until near viewport — improves page speed
`sandbox`	Restricts iframe permissions for security
`referrerpolicy`	Controls what referrer info is sent to the iframe's origin

Embedding YouTube Videos

Go to any YouTube video → Share → Embed. Copy the iframe code. It looks like:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Video title here"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

Embedding Google Maps

Go to Google Maps → Share → Embed a map. Copy the iframe code:

<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  title="Our office location">
</iframe>

The sandbox Attribute

The sandbox attribute restricts what the iframe can do. By default, a sandboxed iframe cannot run scripts, submit forms, or access cookies. You can selectively allow things:

<!-- Fully sandboxed (no scripts, no forms) -->
<iframe src="untrusted-content.html" sandbox></iframe>

<!-- Allow scripts and same-origin access -->
<iframe src="demo.html" sandbox="allow-scripts allow-same-origin"></iframe>

sandbox value	What it allows
`allow-scripts`	Run JavaScript
`allow-forms`	Submit forms
`allow-same-origin`	Access cookies/storage if same origin
`allow-top-navigation`	Navigate the parent page
`allow-popups`	Open pop-up windows

3. Real World Example

YouTube embeds on blog posts — <iframe> with YouTube's embed URL
Google Maps on a "Contact" page — <iframe> from Google Maps embed feature
CodePen live demos — <iframe> to codepen.io
Stripe payment forms — <iframe> for secure payment isolation
Twitter/X embedded tweets — loaded in iframes

4. Code Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Iframe Examples</title>
</head>
<body>

  <h1>Embedded Content Examples</h1>

  <!-- YouTube video embed -->
  <section>
    <h2>Learn HTML in 60 Minutes</h2>
    <iframe
      width="560"
      height="315"
      src="https://www.youtube.com/embed/dQw4w9WgXcQ"
      title="YouTube video: Learn HTML in 60 Minutes"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen
      loading="lazy">
    </iframe>
  </section>

  <!-- Google Maps embed -->
  <section>
    <h2>Find Us Here</h2>
    <iframe
      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2483.5396930884737!2d-0.12775682339056827!3d51.50073577180688!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604b900d26973%3A0x4291f3172409ea92!2sBig%20Ben!5e0!3m2!1sen!2suk!4v1710000000000!5m2!1sen!2suk"
      width="600"
      height="450"
      style="border:0;"
      allowfullscreen
      loading="lazy"
      referrerpolicy="no-referrer-when-downgrade"
      title="Map showing our office near Big Ben, London">
    </iframe>
  </section>

  <!-- Sandboxed iframe with limited permissions -->
  <section>
    <h2>Sandboxed Demo</h2>
    <iframe
      src="demo.html"
      width="800"
      height="400"
      title="Live code demo"
      sandbox="allow-scripts">
    </iframe>
  </section>

</body>
</html>

5. Code Breakdown

Code	What It Does
`src="..."`	The URL to embed — must be allowed by the source website
`title="..."`	Required for accessibility — screen readers announce this to describe the embedded content
`allowfullscreen`	Allows the embedded YouTube player to enter fullscreen mode
`loading="lazy"`	Defers iframe loading until user scrolls near it — improves page load speed
`referrerpolicy="no-referrer-when-downgrade"`	Standard security setting — does not send referrer when navigating to HTTP pages
`sandbox="allow-scripts"`	Restricts iframe but allows JavaScript to run

6. Common Mistakes

Mistake 1 — Missing title attribute

The title attribute is required for accessibility. Screen readers announce it to describe what is in the iframe. Never omit it.

Mistake 2 — Embedding sites that block iframes

Many websites (Google, Facebook, most news sites) set the X-Frame-Options: DENY HTTP header, which prevents them from being embedded in iframes. You will see a blank iframe or error. Only embed content that explicitly supports embedding.

Mistake 3 — Not using lazy loading

Iframes load their entire content immediately by default. If a page has multiple iframes (e.g. several YouTube videos), page load is severely impacted. Always add loading="lazy".

7. Best Practices

Always include a title attribute — required for accessibility.

Use loading="lazy" — especially for below-the-fold iframes.

Use sandbox for untrusted content — limits what the embedded page can do.

Consider performance — each iframe is a separate page load. Prefer YouTube's nocookie domain: youtube-nocookie.com for privacy.

8. Practice Exercise

Create iframe-practice.html with:

An embedded YouTube video (go to any YouTube video → Share → Embed → copy the code)
An embedded Google Map of any location (Google Maps → Share → Embed a map → copy the code)
Add loading="lazy" and a descriptive title to both
Make both iframes responsive using CSS: set width to 100% and use an aspect ratio wrapper

9. Assignment

Build a Contact page for a fictional business. Include: the business address and phone number, an embedded Google Map showing the location, an embedded YouTube video (company introduction video), and a contact form. All iframes must have title attributes and lazy loading.

10. Interview Questions

Q1: What is an iframe and what is it typically used for?

Answer: An iframe (inline frame) embeds another HTML document within the current page. Common uses: YouTube/Vimeo video embeds, Google Maps, payment forms (Stripe), social media widgets, live code demos, and any third-party content. The embedded content runs in its own isolated browsing context.

Q2: What are the security considerations with iframes?

Answer: Key security considerations: 1) Clickjacking — malicious sites can embed your page in a hidden iframe to steal clicks. Prevent with the X-Frame-Options HTTP header. 2) Only embed trusted sources. 3) Use the sandbox attribute to restrict permissions for untrusted content. 4) Be aware that embedded third-party iframes can track users.

Q3: What does the sandbox attribute do?

Answer: The sandbox attribute restricts what an iframe can do. A fully sandboxed iframe blocks scripts, forms, popups, and access to cookies. You can selectively re-enable capabilities: sandbox="allow-scripts" allows JavaScript, sandbox="allow-forms" allows form submission. Use sandbox when embedding content from untrusted sources.

1. Introduction

2. Theory

Basic Syntax

Important Attributes

Embedding YouTube Videos

Embedding Google Maps

The sandbox Attribute

3. Real World Example

4. Code Example

5. Code Breakdown

6. Common Mistakes

7. Best Practices

8. Practice Exercise

9. Assignment

10. Interview Questions

Q1: What is an iframe and what is it typically used for?

Q2: What are the security considerations with iframes?

Q3: What does the sandbox attribute do?

11. Additional Resources