← Back to Chapters

Iframe in HTML

? HTML <iframe> Tag

⚡ Quick Overview

The <iframe> (inline frame) element lets you embed one HTML page inside another. Think of it as a “window” that shows external or internal content without forcing the user to leave your site. It’s commonly used for YouTube videos, Google Maps, embedded docs, and dashboards.

? Key Concepts

  • Embedded context: The iframe loads another HTML document inside your page.
  • Isolation & security: The sandbox attribute restricts capabilities of the embedded page.
  • Performance: Use loading="lazy" for below-the-fold iframes to improve page speed.
  • Accessibility: Always provide a descriptive title so screen readers can identify the frame.
  • Permissions: The allow attribute controls fine-grained access to features like camera, clipboard, etc.
  • Not all URLs work: Some sites block embedding using security headers such as X-Frame-Options or frame-ancestors.

? Syntax & Main Attributes

Basic iframe syntax:

? View Basic Syntax 
<iframe src="URL"
        title="Short description"
        width="600"
        height="400">
</iframe>

Commonly used attributes:

  • src: URL of the page to display (required unless using srcdoc).
  • title: Short accessible description for assistive technologies.
  • width / height: Size of the frame (px or %). Prefer CSS for responsive layouts.
  • name: Target name so links can open inside this iframe.
  • allowfullscreen: Lets embedded videos enter fullscreen mode.
  • loading: Use lazy to defer loading until the iframe is near the viewport.
  • sandbox: Creates a security boundary; add tokens like allow-scripts, allow-forms, allow-same-origin as needed.
  • allow: Fine-grained permissions (e.g., accelerometer; clipboard-write; encrypted-media).
  • referrerpolicy: Controls what referrer information is sent (e.g., no-referrer).
  • srcdoc: Inline HTML string to render directly instead of fetching a URL.

? Example: Embed a Webpage

? View Code Example 
<iframe
  src="https://www.example.com"                 <!-- URL to embed -->
  title="Example site preview"                  <!-- Accessible name -->
  width="600" height="400"                      <!-- Fallback sizing -->
  name="exampleFrame"                           <!-- Target name for links -->
  loading="lazy"                                <!-- Better performance -->
  sandbox="allow-scripts allow-same-origin"     <!-- Restrict capabilities -->
  allow="clipboard-write; encrypted-media"      <!-- Fine-grained permissions -->
  referrerpolicy="no-referrer"                  <!-- Privacy -->
></iframe>

? Live Output / Explanation

? Embedded Page Preview

Below is a live iframe that attempts to load https://www.example.com. In real projects, you might embed videos, maps, or internal dashboards in the same way.

? Example: Inline Content with srcdoc

? View Code Example 
<iframe
  title="Inline HTML via srcdoc"
  srcdoc="&lt;h3 style='text-align:center'&gt;Hello from srcdoc!&lt;/h3&gt;
          &lt;p style='text-align:center'&gt;This HTML is inside the iframe tag.&lt;/p&gt;"
  style="width:100%; height:160px; border:2px solid #3399ff; border-radius:8px;"
  sandbox
></iframe>

? Use Cases

  • Embedding YouTube or other video players inside a content page.
  • Showing Google Maps or other mapping services.
  • Displaying embedded documents (slides, PDFs, reports).
  • Loading internal tools / dashboards while keeping the main navigation around them.
  • Demonstration sandboxes (e.g., code editors, small widgets) hosted elsewhere.

? Tips & Best Practices

  • Always provide a meaningful title so screen reader users understand what the frame contains.
  • Prefer CSS (flexbox, grid, aspect-ratio) for responsive sizing instead of fixed pixel width/height.
  • Use loading="lazy" on below-the-fold iframes to speed up initial page load.
  • Start with a strict sandbox and add only the tokens you truly need.
  • Grant only minimal permissions in allow (e.g., just encrypted-media for media playback).
  • Test your URL: some sites disallow embedding via X-Frame-Options or Content-Security-Policy headers.
  • Avoid relying entirely on iframes for critical content; they are slower and harder to make fully accessible.

? Try It Yourself

  • Embed a YouTube video using an iframe and include allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" plus allowfullscreen.
  • Create a responsive wrapper using CSS:
    ? View Responsive CSS 
    .iframe-wrap { aspect-ratio: 16/9; width: 100%; }
.iframe-wrap iframe { width: 100%; height: 100%; border: 0; }
    Then wrap your iframe in a <div class="iframe-wrap">....
  • Experiment with a strict sandbox (no tokens) vs. a permissive one and observe which features stop working.
  • Use srcdoc to display a small “Hello” card without any external URL. Try adding your own inline styles and HTML structure.

? Summary

  • <iframe> lets you embed another HTML document inside your page.
  • Use attributes like src, title, loading, sandbox, and allow to control behavior, performance, and security.
  • Not every URL is embeddable; always test and check for security headers that may block iframes.
  • Combine responsive CSS with thoughtful permissions to build safe, accessible, and flexible embeds.