Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
The <iframe> element creates a nested browsing context, allowing you to embed content from other pages or domains into your website.
Display external websites, videos, or interactive content
Isolated environment with its own document and styles
CSS and JavaScript don't affect parent page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Iframe</title>
</head>
<body>
<div class="container">
<h1>🖼️ Iframe Example</h1>
<p>An iframe (inline frame) embeds another HTML page within the current page.</p>
<div class="iframe-wrapper">
<iframe
src="https://example.com"
title="Example Website"
loading="lazy">
</iframe>
</div>
<div class="info">
<strong>💡 Key Attributes:</strong>
<ul style="margin: 10px 0 0 20px;">
<li><code>src</code> - URL of the page to embed</li>
<li><code>title</code> - Accessibility description</li>
<li><code>loading</code> - Controls loading behavior (lazy/eager)</li>
</ul>
</div>
</div>
</body>
</html>Loading preview...
src - URL of the page to embedtitle - Accessibility description (required)width/height - Dimensions in pixels or percentageloading - lazy or eager loading<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Iframe</title>
</head>
<body>
<div class="container">
<h1>📱 Responsive Video Embed</h1>
<div class="card">
<span class="badge">✨ 16:9 Aspect Ratio</span>
<h3>YouTube Video Example</h3>
<p>This iframe maintains aspect ratio and is fully responsive!</p>
</div>
<div class="iframe-container">
<iframe
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
loading="lazy">
</iframe>
</div>
<div class="card">
<h3>🎯 How It Works</h3>
<p><strong>Aspect Ratio Trick:</strong>
<code>padding-bottom: 56.25%</code> creates 16:9 ratio</p>
<p style="margin-top: 8px;"><strong>Formula:</strong> (9 / 16) × 100 = 56.25%</p>
<ul style="margin-top: 12px; margin-left: 20px;">
<li>Parent has <code>position: relative</code></li>
<li>Iframe has <code>position: absolute</code></li>
<li>Iframe fills 100% width and height</li>
</ul>
</div>
</div>
</body>
</html>Loading preview...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Iframe Features</title>
</head>
<body>
<div class="grid">
<h1>🚀 Advanced Iframe Attributes</h1>
<!-- Sandbox Demo -->
<div class="demo-card">
<div class="demo-header">
<h3>🔒 Sandbox Attribute</h3>
<p>Restricts iframe capabilities for security</p>
</div>
<div class="demo-body">
<iframe
srcdoc="<h2>Sandboxed Content</h2><p>This iframe has restricted permissions.</p>"
sandbox="allow-same-origin"
title="Sandboxed iframe">
</iframe>
<div class="feature-list">
<strong>🛡️ Sandbox Values:</strong>
<div style="margin-top: 8px;">
<span class="attribute-badge">allow-scripts</span>
<span class="attribute-badge">allow-forms</span>
<span class="attribute-badge">allow-popups</span>
<span class="attribute-badge">allow-same-origin</span>
</div>
</div>
</div>
</div>
<!-- Lazy Loading Demo -->
<div class="demo-card">
<div class="demo-header">
<h3>⚡ Lazy Loading</h3>
<p>Load iframe only when visible</p>
</div>
<div class="demo-body">
<iframe
src="https://example.com"
loading="lazy"
title="Lazy loaded iframe">
</iframe>
<div class="feature-list">
<strong>🎯 Loading Options:</strong>
<ul>
<li><code>loading="lazy"</code> - Load when near viewport</li>
<li><code>loading="eager"</code> - Load immediately (default)</li>
<li>Improves page performance significantly</li>
</ul>
</div>
</div>
</div>
<!-- Referrer Policy Demo -->
<div class="demo-card">
<div class="demo-header">
<h3>🔐 Referrer Policy</h3>
<p>Control referrer information sent</p>
</div>
<div class="demo-body">
<iframe
src="https://example.com"
referrerpolicy="no-referrer"
title="Iframe with referrer policy">
</iframe>
<div class="feature-list">
<strong>📋 Policy Values:</strong>
<ul>
<li><code>no-referrer</code> - Don't send referrer</li>
<li><code>origin</code> - Send only origin</li>
<li><code>strict-origin</code> - Send origin on HTTPS only</li>
</ul>
</div>
</div>
</div>
<!-- Allow Attribute Demo -->
<div class="demo-card">
<div class="demo-header">
<h3>🎥 Allow Attribute</h3>
<p>Control feature permissions</p>
</div>
<div class="demo-body">
<iframe
src="https://example.com"
allow="camera; microphone; geolocation"
title="Iframe with permissions">
</iframe>
<div class="feature-list">
<strong>🎛️ Feature Policies:</strong>
<div style="margin-top: 8px;">
<span class="attribute-badge">camera</span>
<span class="attribute-badge">microphone</span>
<span class="attribute-badge">geolocation</span>
<span class="attribute-badge">payment</span>
<span class="attribute-badge">fullscreen</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Loading preview...
Restricts iframe capabilities
Controls when iframe loads
Controls referrer information
Feature permissions (Permissions Policy)
YouTube, Vimeo, and other video platforms
Google Maps, OpenStreetMap integration
Secure payment gateway integration
Social media feeds, analytics dashboards
title attribute for accessibilityloading="lazy" for performancesandbox for security<iframe> element is supported in all browsers. Modern attributes likeloading (Chrome 77+, Firefox 75+) and sandbox (all modern browsers) provide enhanced functionality. The allow attribute (Permissions Policy) is supported in Chrome 60+, Edge 79+, and Safari 11.1+.