An HTML iframe (Inline Frame) embeds another external HTML page, video player, map, or widget directly inside the current web document using the <iframe> tag.
The <iframe> element requires a src URL attribute specifying the embedded document destination.
<iframe src="https://example.com" width="800" height="450" title="External Web Demo" loading="lazy" sandbox="allow-scripts allow-same-origin"></iframe>
Key iframe attributes:
src: Specifies the URL of the external page or video asset to embed.title: Essential text description for screen reader accessibility explaining what the iframe contains.sandbox: Restricts capabilities (scripts, forms, popups) inside the embedded frame for enhanced security.allowfullscreen: Permits embedded media players (YouTube, Vimeo) to expand into fullscreen mode.flowchart LR
A["Parent Web Page"] --> B["iframe Tag (src=...)"]
B --> C["Isolated Browser Browsing Context"]
C --> D["External Page / Video / Map Content"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Iframes Demonstration</title>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<h2>Embedded Video Showcase</h2>
<!-- Container wrapper for responsive iframe player -->
<div style="background-color: #1e293b; padding: 1rem; border-radius: 12px; max-width: 700px;">
<iframe
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="Interactive Web Video Tutorial"
width="100%"
height="380"
style="border: none; border-radius: 8px;"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
loading="lazy">
</iframe>
</div>
</body>
</html>
title attribute: Screen readers announce iframe content titles so visually impaired users know what is embedded.sandbox attribute for untrusted third-party embeds: Protects your website from malicious scripts or unauthorized form submissions inside external pages.loading="lazy" for below-the-fold embedded frames: Prevents embedded maps or heavy video players from slowing down initial page load speeds.Write an <iframe> tag embedding https://wikipedia.org with an explicit title, width="600", height="400", and loading="lazy"!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.
You've completed this section! Take a quick 5-question quiz to check your understanding.