HTML Iframes Guide

Embed external content securely with iframes

What are Iframes?

Iframes (Inline Frames) allow you to embed another HTML document within your current page. They're commonly used for videos, maps, ads, and third-party widgets.

Jump to Security

Basic Iframe Usage

Essential Attributes

  • src - URL of the content to embed
  • width/height - Dimensions in pixels or %
  • title - Required for accessibility
  • loading - "lazy" for deferred loading
<!-- Basic iframe structure -->
<iframe
  src="url-to-embed"
  width="300"
  height="200"
  title="Description"
  loading="lazy">
</iframe>

Responsive Iframes

For responsive designs, use CSS aspect ratio techniques:

<!-- Aspect ratio container -->
<div class="iframe-container">
  <iframe src="..." title="..."></iframe>
</div>

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

Iframe Security

Sandbox Attribute

The sandbox attribute enables extra restrictions for iframe content:

  • allow-scripts: Allow JavaScript execution
  • allow-same-origin: Allow same-origin access
  • allow-forms: Allow form submission
  • allow-popups: Allow popups/new windows
<!-- Secure sandboxed iframe -->
<iframe
  src="untrusted-content.html"
  sandbox="allow-scripts allow-same-origin"
  title="Secure Content">
</iframe>

Security Best Practices

  • Always use the sandbox attribute for untrusted content
  • Include title for accessibility
  • Use loading="lazy" for performance
  • Consider Content Security Policy (CSP) headers
  • Validate all embedded URLs

Never Do This

<!-- UNSECURE - Avoid this! -->
<iframe 
  src="untrusted.com" 
  sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
  allow="autoplay; camera; microphone">
</iframe>

Practical Examples

Basic Iframe Embed

Embedding external content with basic attributes

YouTube Video Embed

Responsive YouTube embed with aspect ratio preservation

Sandboxed Iframe

Secure iframe with restricted capabilities

Advanced Techniques

Cross-Domain Communication

Use window.postMessage() for secure communication between iframes and parent pages:

// Parent window sending message
const iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage(
  { key: 'value' }, 
  'https://allowed-origin.com'
);

// Iframe receiving message
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://parent-site.com') return;
  console.log('Received:', event.data);
});
  • Always verify event.origin
  • Use specific target origins (not *)
  • Consider using libraries like iframe-resizer

Embedding Popular Services

ServiceImplementation
Google Maps<iframe src="https://maps.google.com/maps?q=[address]&output=embed"></iframe>
Twitter<iframe src="https://platform.twitter.com/embed/Tweet.html?id=[tweet-id]"></iframe>
Spotify<iframe src="https://open.spotify.com/embed/track/[track-id]"></iframe>

Try Our HTML Editor

Experiment with iframes in our interactive editor:

  • Test different sandbox configurations
  • See responsive iframes in action
  • Try embedding popular services
  • Practice secure communication techniques
Launch HTML Editor
<!DOCTYPE html>
<html>
<head>
  <title>Iframe Playground</title>
  <style>
    .iframe-container {
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
    }
    .iframe-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="iframe-container">
    <iframe 
      src="https://example.com" 
      sandbox="allow-same-origin"
      title="Playground Iframe">
    </iframe>
  </div>
</body>
</html>
< Previous (HTML5-Structure)Next (Meta) >