HTML Iframes - Embedding Content

Basic Iframe Syntax

The <iframe> tag embeds another HTML page within the current page. The src attribute specifies the URL of the page to embed.

Iframes are commonly used to embed maps, videos, advertisements, or content from other websites.

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

<!-- Iframe with title for accessibility -->
<iframe src="map.html" title="Location Map" width="800" height="600"></iframe>

Iframe Attributes

The width and height attributes set the iframe dimensions in pixels or percentages.

The name attribute can be used as a target for links, allowing you to load pages into specific iframes.

The frameborder attribute (deprecated in HTML5) controlled borders; use CSS border property instead.

The sandbox attribute enables security restrictions on iframe content.

<!-- Iframe with name for targeting -->
<iframe src="page1.html" name="display" width="700" height="500"></iframe>
<a href="page2.html" target="display">Load Page 2</a>

<!-- Iframe with sandbox restrictions -->
<iframe src="untrusted.html" sandbox="allow-scripts allow-same-origin"></iframe>

Iframe Security

The sandbox attribute provides a security mechanism to restrict iframe capabilities. Without any value, it applies all restrictions.

Common sandbox values include: allow-scripts (enables JavaScript), allow-same-origin (allows access to same-origin content), allow-forms (allows form submission), and allow-popups (allows popups).

Always use the sandbox attribute when embedding untrusted content to prevent security vulnerabilities.

Use the Content Security Policy (CSP) frame-ancestors directive to control which sites can embed your page.

<!-- Restrictive sandbox (no scripts, isolated origin) -->
<iframe src="user-content.html" sandbox></iframe>

<!-- Sandbox with specific permissions -->
<iframe src="widget.html" 
        sandbox="allow-scripts allow-forms"
        width="100%" 
        height="300"></iframe>

Responsive Iframes

Iframes with fixed dimensions don't adapt to different screen sizes. Use CSS to make iframes responsive.

The aspect ratio technique uses a wrapper div with padding-bottom to maintain proportions.

Position the iframe absolutely within the wrapper and set width and height to 100%.

<!-- HTML -->
<div class="iframe-container">
  <iframe src="video.html"></iframe>
</div>

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

Common Use Cases

Embedding YouTube or Vimeo videos is one of the most common iframe uses. Video platforms provide embed codes with iframes.

Google Maps can be embedded using iframes, allowing interactive maps on your website.

Third-party widgets like social media feeds, payment forms, or chat systems often use iframes to isolate their code.

Advertisement networks typically serve ads through iframes to prevent ad scripts from affecting the main page.

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

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