<iframe>

Since:		HTML 4（1997）

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

sample_iframe.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>iframe Example</title>
</head>
<body style="margin: 20px;">

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

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

  <!-- Sandboxed iframe (only scripts allowed) -->
  <iframe
    src="sandbox-content.html"
    width="400"
    height="200"
    sandbox="allow-scripts"
    title="Sandboxed content">
  </iframe>

  <!-- srcdoc: embed HTML directly as a string -->
  <iframe
    srcdoc="<p style='font-family:sans-serif;padding:16px'>HTML written directly into iframe</p>"
    width="300"
    height="80"
    title="srcdoc example">
  </iframe>

</body>
</html>

Result

The external web page is displayed embedded within the page. The frame boundary is clearly visible with the border style applied.

View sample page

Responsive iframes (Fixed Aspect Ratio)

Because iframe uses fixed pixel dimensions for width and height, it does not respond to viewport changes by default. Use the CSS aspect-ratio property or the padding trick to make the height scale automatically with the width.

<style>
  /* Using aspect-ratio (recommended for modern browsers) */
  .responsive-iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
  }

  /* Padding trick (for browsers that don't support aspect-ratio) */
  .iframe-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 9 / 16 = 56.25% */
    overflow: hidden;
  }
  .iframe-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
  }
</style>

<!-- Using aspect-ratio -->
<iframe
  class="responsive-iframe"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="YouTube video"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

<!-- Using the padding trick -->
<div class="iframe-wrapper">
  <iframe
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="YouTube video"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
  </iframe>
</div>

Cross-Frame Communication with postMessage

Same-origin iframe content can be accessed directly via JavaScript. For cross-origin frames, use the postMessage API to send and receive messages.

<!-- Parent page -->
<iframe id="childFrame" src="child.html" width="400" height="200"></iframe>

<script>
var frame = document.getElementById('childFrame');

// Send a message after the iframe loads
frame.addEventListener('load', function() {
  frame.contentWindow.postMessage(
    { type: 'greeting', text: 'Hello' },
    '*' // In production, specify the target origin (e.g., 'https://example.com')
  );
});

// Receive messages from the iframe
window.addEventListener('message', function(event) {
  // Always verify the origin before processing
  if (event.origin !== 'https://example.com') return;
  console.log('Received:', event.data);
});
</script>

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").