<iframe>

Definition and Usage

The <iframe> element specifies an inline frame, which is used to embed another document within the current HTML document.

Iframes are commonly used to embed external content such as videos, maps, advertisements, or other web pages.

Attributes

Examples

Basic Iframe

Embed a simple webpage in an iframe:

<iframe src="https://www.example.com" width="600" height="400">
</iframe>

Responsive Iframe

Create a responsive iframe that adapts to screen size:

<style>
  .iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
  }

  .iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
  }
</style>

<div class="iframe-container">
  <iframe src="https://www.example.com"></iframe>
</div>

YouTube Video Embed

Embed a YouTube video using an iframe:

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

Iframe with Sandbox Attribute

Use the sandbox attribute for security restrictions:

<!-- Sandboxed iframe with no scripts allowed -->
<iframe
  src="untrusted-content.html"
  sandbox=""
  width="600"
  height="400">
</iframe>

<!-- Sandboxed iframe allowing forms and scripts -->
<iframe
  src="semi-trusted-content.html"
  sandbox="allow-forms allow-scripts"
  width="600"
  height="400">
</iframe>

Lazy Loading Iframe

Defer loading of the iframe until it's near the viewport:

<iframe
  src="https://www.example.com"
  width="600"
  height="400"
  loading="lazy">
</iframe>

Google Maps Embed

Embed a Google Map in your webpage:

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d..."
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade">
</iframe>

Security Considerations

When using iframes, it's crucial to understand and implement proper security measures:

Cross-Site Scripting (XSS) Risks

• Never embed content from untrusted sources without restrictions
• Malicious iframes can attempt to access parent page data
• Use HTTPS for all iframe sources to prevent man-in-the-middle attacks

The Sandbox Attribute

The sandbox attribute applies extra restrictions to the iframe content:

<!-- Completely sandboxed (most restrictive) -->
<iframe src="untrusted.html" sandbox></iframe>

<!-- Allow forms and scripts -->
<iframe src="content.html" sandbox="allow-forms allow-scripts"></iframe>

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

Content Security Policy (CSP)

• Implement CSP headers to control which sources can be embedded
• Use frame-ancestors directive to prevent clickjacking
• Restrict iframe sources using frame-src directive

Best Practices

• Always specify width and height attributes to prevent layout shifts
• Use loading="lazy" for iframes below the fold to improve page load performance
• Include a title attribute for accessibility (screen readers)
• Use the sandbox attribute when embedding untrusted content
• Implement responsive design using CSS for better mobile experience
• Avoid using the deprecated frameborder attribute (use CSS border instead)
• Set appropriate referrerpolicy to control referrer information
• Use HTTPS URLs in the src attribute for security
• Minimize the number of iframes on a page to improve performance

Try it Yourself