<iframe>

The iframe element embeds another HTML page or external content inline within the current page as an inline frame.

Syntax

<!-- Basic usage -->
<iframe src="https://example.com" width="600" height="400"></iframe>

<!-- Embed a YouTube video -->
<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  width="560"
  height="315"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope"
  allowfullscreen>
</iframe>

Common Attributes

Attribute	Description
src	Specifies the URL of the page to embed.
width	Specifies the width of the frame in pixels or as a percentage.
height	Specifies the height of the frame in pixels.
allow	Specifies the features permitted within the frame (such as camera, geolocation, and autoplay), separated by spaces.
sandbox	Applies restrictions to the content inside the frame. An empty value enables all restrictions; individual restrictions can be lifted with values like `allow-scripts`.
loading	Specifies the loading behavior: `eager` loads immediately, `lazy` defers loading until the frame is near the viewport.
title	Provides a text description of the frame's content. Important for screen reader accessibility.

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>iframe Example</title>
  <style>
    iframe {
      border: 1px solid #ccc;
      border-radius: 4px;
    }
  </style>
</head>
<body>

  <p>Embedding an external page</p>

  <!-- Embed Google Maps -->
  <iframe
    src="https://www.google.com/maps/embed?pb=!1m18..."
    width="600"
    height="450"
    style="border: 0;"
    loading="lazy"
    title="Google Maps">
  </iframe>

  <!-- A sandboxed frame with restrictions -->
  <iframe
    src="sandbox-content.html"
    width="400"
    height="200"
    sandbox="allow-scripts"
    title="Sandboxed Content">
  </iframe>

</body>
</html>

Result

The external web page or map is displayed embedded within the page. If a border is applied, the frame boundary is clearly visible.

┌─────────────────────────────────────┐
│  [Google Maps is displayed here]    │
│                                     │
│  ← External content appears here   │
│                                     │
└─────────────────────────────────────┘

Notes

The iframe element is commonly used to embed content from external services such as YouTube videos, Google Maps, and social media widgets. In practice, you copy the "embed code" provided by the external service and paste it directly into your page.

For security reasons, always specify the sandbox attribute when embedding content from untrusted sources. Setting sandbox to an empty value restricts almost all operations including script execution, form submission, and popups. You can selectively re-enable only what you need, such as allow-scripts or allow-forms.

For accessibility, always include a title attribute that describes the frame's content — screen readers use it when announcing the frame. You can also improve initial page load performance by using lazy loading (loading="lazy").