HTML iframes

<iframe> (inline frame) allows you to embed another HTML page within the current page. Whether embedding videos, maps, or other web pages, iframes are an indispensable tool in web development.

iframe Basics

Use <iframe src="URL"></iframe> to embed another web page into the current page. The width and height attributes control the display dimensions:

<!-- Embed a simple page, 600px wide, 400px tall -->
<iframe src="https://example.com" width="600" height="400">
  Your browser does not support iframes.
</iframe>

iframe Attributes Explained

iframes provide several attributes to control embedding behavior:

• src — The URL address of the page to embed
• width / height — Set the pixel dimensions of the iframe
• title — Provide a description for the iframe; very important for screen readers
• name — Give the iframe a name, which can be used as the target for links (<a>)

The name attribute combined with target lets links open inside an iframe:

<!-- Named iframe -->
<iframe src="about:blank" name="content-frame"
        width="100%" height="300"></iframe>

<!-- Links open inside the iframe via target -->
<a href="https://www.wikipedia.org" target="content-frame">
  Open Wikipedia in iframe
</a>
<a href="https://www.example.com" target="content-frame">
  Open Example in iframe
</a>

iframe Security — The sandbox Attribute

The sandbox attribute imposes additional restrictions on content within an iframe and is an important security measure. It can restrict form submission, popups, script execution, and other behaviors:

• sandbox="" (empty) — Enables all restrictions, strictest form
• sandbox="allow-scripts" — Allows script execution, but blocks other behaviors
• sandbox="allow-scripts allow-forms" — Allows scripts and form submission

<!-- Strictest sandbox: disables all advanced features -->
<iframe src="https://example.com" sandbox=""></iframe>

<!-- Allow scripts, but block form submission and popups -->
<iframe src="https://example.com" sandbox="allow-scripts"></iframe>

<!-- Allow scripts and forms, but still block popups, navigation, etc. -->
<iframe src="https://example.com"
        sandbox="allow-scripts allow-forms"></iframe>

Embedding Third-Party Content

The most common real-world iframe usage is embedding content from third-party services, such as YouTube videos and Google Maps:

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

<!-- Embed a Google Map -->
<iframe width="600" height="450"
        src="https://www.google.com/maps/embed?pb=..."
        title="Google Map"
        allowfullscreen
        loading="lazy"></iframe>

When embedding third-party content, platforms usually provide ready-made iframe code in their share/embed options — you just need to copy and paste. Make sure to include the title attribute and loading="lazy" for optimized loading performance.

iframe-Parent Page Communication Overview

When the iframe and parent page share the same origin (same protocol, domain, and port), you can directly access each other's DOM via JavaScript. For cross-origin scenarios, HTML5 provides the postMessage API for secure communication:

<!-- Parent page sends a message -->
<iframe src="https://other-domain.com/page"
        id="myFrame" title="Cross-origin page"></iframe>
<script>
  var frame = document.getElementById('myFrame');
  frame.contentWindow.postMessage('Hello, iframe!', 'https://other-domain.com');
</script>

<!-- Inside the iframe, receiving the message (must be in the embedded page) -->
<script>
  window.addEventListener('message', function(event) {
    // Always verify the origin!
    if (event.origin !== 'https://parent-domain.com') return;
    console.log('Received:', event.data);
  });
</script>

📖 Summary

• <iframe> embeds another HTML page within the current page
• src specifies the embedding address; width/height control dimensions
• title provides accessibility description; name works with the target attribute
• sandbox restricts functionality within the iframe for enhanced security
• YouTube, Google Maps, and other third-party content are commonly embedded via iframes
• postMessage enables cross-origin parent-child page communication

📝 Exercises

1. Embed Your First Video: Find a YouTube video, copy its embed code, and paste it into your HTML file. Make sure to add the title attribute and loading="lazy".
2. Sandbox Experiment: Create an iframe, start with sandbox="" (the strictest mode), then gradually enable allow-scripts and allow-forms, observing how the behavior changes.