HTML 15 💻 iframe element - KandZ

The <iframe> (inline frame) element is used to embed another HTML document within the current webpage. It allows you to display content from external sources, such as videos, maps, or other websites, directly on your page.

What is an iframe?

An iframe creates a nested browsing context — essentially a window within your webpage that loads and displays a separate HTML document.

Key Characteristics:

Inline-block element (behaves like an inline element but has block properties)
Can contain any external HTML document
Used for embedding videos, maps, social media posts, forms, and more
Can be targeted by anchor links to load different content
Can be styled with CSS like any other element

Basic Syntax:

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

Common Attributes

Attribute	Purpose	Example
`src`	Specifies the URL of the document to embed	`src="https://example.com"`
`width`	Sets the width (in pixels or percentage)	`width="600"`
`height`	Sets the height (in pixels or percentage)	`height="400"`
`name`	Assigns a name to the iframe (for targeting)	`name="myframe"`
`allowfullscreen`	Allows full-screen mode	`allowfullscreen`
`title`	Provides a title (accessibility)	`title="Embedded Content"`
`frameborder`	Removes border (deprecated, use CSS)	`frameborder="0"`
`scrolling`	Controls scrollbars (`yes`, `no`, `auto`)	`scrolling="auto"`
`loading`	Lazy loading behavior	`loading="lazy"`
`sandbox`	Enables security restrictions	`sandbox="allow-scripts"`

Using iframes with Anchor Links

You can use an anchor link’s target attribute to load different pages into the iframe.

<iframe src="https://www.google.com" width="600" height="400" 
        allowfullscreen title="External" name="itarget">
</iframe>

<a href="https://fedoraproject.org/" target="itarget">Fedora OS</a>

How It Works:

The iframe has a name attribute (e.g., name="itarget")
The anchor link has a target attribute matching that name
Clicking the link loads the new URL inside the iframe

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe Element</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background: #f4f4f4;
        }
        h1, h2 { color: #333; }

        .container {
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }

        iframe {
            border: 2px solid #ddd;
            border-radius: 8px;
            max-width: 100%;
        }

        .nav-links {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 15px 0;
            padding: 15px;
            background: #e9ecef;
            border-radius: 8px;
        }

        .nav-links a {
            padding: 8px 16px;
            background: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            transition: background 0.3s;
        }

        .nav-links a:hover {
            background: #0056b3;
        }

        .example-box {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin: 10px 0;
            border-left: 4px solid #007bff;
        }

        .code-block {
            background: #2d2d2d;
            color: #f8f8f2;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 14px;
        }

        .code-block .tag { color: #f92672; }
        .code-block .attr { color: #a6e22e; }
        .code-block .value { color: #e6db74; }
    </style>
</head>
<body>

    <h1>iframe Element</h1>

    <!-- ====== SECTION 1: BASIC IFRAME ====== -->
    <div class="container">
        <h2>1. Basic iframe</h2>

        <div class="example-box">
            <p><strong>Google embedded in an iframe:</strong></p>
            <iframe src="https://www.google.com" 
                    width="100%" 
                    height="400" 
                    title="Google Search Page"
                    loading="lazy">
            </iframe>
        </div>
    </div>

    <!-- ====== SECTION 2: IFRAME WITH TARGETED LINKS ====== -->
    <div class="container">
        <h2>2. iframe with Targeted Navigation</h2>

        <p>Click a link below to load different pages inside the iframe:</p>

        <div class="nav-links">
            <a href="https://www.google.com" target="myframe">Google</a>
            <a href="https://fedoraproject.org/" target="myframe">Fedora OS</a>
            <a href="https://www.wikipedia.org/" target="myframe">Wikipedia</a>
            <a href="https://github.com/" target="myframe">GitHub</a>
            <a href="https://www.youtube.com/" target="myframe">YouTube</a>
        </div>

        <iframe name="myframe" 
                src="https://www.google.com" 
                width="100%" 
                height="450" 
                title="Targeted Navigation Frame"
                allowfullscreen>
        </iframe>
    </div>

    <!-- ====== SECTION 3: EMBEDDING VIDEOS ====== -->
    <div class="container">
        <h2>3. Embedding YouTube Videos</h2>

        <div style="display: flex; flex-wrap: wrap; gap: 20px;">
            <!-- YouTube Embed -->
            <div style="flex: 1; min-width: 300px;">
                <h3>Video Embed</h3>
                <iframe width="100%" 
                        height="315" 
                        src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
                        title="YouTube video player"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                        allowfullscreen>
                </iframe>
            </div>

            <!-- Vimeo Embed -->
            <div style="flex: 1; min-width: 300px;">
                <h3>Vimeo Embed</h3>
                <iframe width="100%" 
                        height="315" 
                        src="https://player.vimeo.com/video/76979871" 
                        title="Vimeo video player"
                        allow="autoplay; fullscreen; picture-in-picture" 
                        allowfullscreen>
                </iframe>
            </div>
        </div>
    </div>

    <!-- ====== SECTION 4: EMBEDDING MAPS ====== -->
    <div class="container">
        <h2>4. Embedding Google Maps</h2>

        <div style="display: flex; flex-wrap: wrap; gap: 20px;">
            <!-- Google Maps Embed -->
            <div style="flex: 1; min-width: 300px;">
                <h3>Map Location</h3>
                <iframe width="100%" 
                        height="350" 
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.2219901290355!2d-74.00369368400567!3d40.71312937933038!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a316bb7acdf%3A0x2b2b9bcb0ff1d3b3!2sTimes%20Square!5e0!3m2!1sen!2sus!4v1644262070686!5m2!1sen!2sus" 
                        style="border:0;" 
                        allowfullscreen="" 
                        loading="lazy" 
                        title="Google Maps Location">
                </iframe>
            </div>

            <!-- Street View -->
            <div style="flex: 1; min-width: 300px;">
                <h3>Street View</h3>
                <iframe width="100%" 
                        height="350" 
                        src="https://www.google.com/maps/embed?pb=!4v1644262110906!6m8!1m7!1sCAoSLEFGMVFpcE5DMVlBRUpFcHVTc0F4Y01QeWQyYkxDT0dScDlOWkZOQmhGWjRJ!2m2!1d40.71312937933038!2d-74.00369368400567!3f80!4f0!5f0.7820865974627469" 
                        style="border:0;" 
                        allowfullscreen="" 
                        loading="lazy" 
                        title="Google Street View">
                </iframe>
            </div>
        </div>
    </div>

    <!-- ====== SECTION 5: EMBEDDING SOCIAL MEDIA ====== -->
    <div class="container">
        <h2>5. Embedding Social Media</h2>

        <div style="display: flex; flex-wrap: wrap; gap: 20px;">
            <!-- Twitter/X Embed -->
            <div style="flex: 1; min-width: 300px;">
                <h3>Twitter/X Post</h3>
                <iframe width="100%" 
                        height="400" 
                        src="https://platform.twitter.com/widgets/tweet.html?dnt=true&url=https%3A%2F%2Ftwitter.com%2Fshakira%2Fstatus%2F1036728505980698624" 
                        title="Twitter/X Embed"
                        allowfullscreen>
                </iframe>
            </div>

            <!-- Spotify Embed -->
            <div style="flex: 1; min-width: 300px;">
                <h3>Spotify Player</h3>
                <iframe width="100%" 
                        height="400" 
                        src="https://open.spotify.com/embed/track/0VjIjW4GlUZAMYd2vXMi3b" 
                        title="Spotify Embed"
                        allow="encrypted-media" 
                        allowfullscreen>
                </iframe>
            </div>
        </div>
    </div>

    <!-- ====== SECTION 6: CODE EXAMPLES ====== -->
    <div class="container">
        <h2>6. iframe Code Examples</h2>

        <h3>Basic iframe:</h3>
        <div class="code-block">
            <span class="tag">&lt;iframe</span> 
            <span class="attr">src</span>=<span class="value">"https://www.example.com"</span> 
            <span class="attr">width</span>=<span class="value">"600"</span> 
            <span class="attr">height</span>=<span class="value">"400"</span> 
            <span class="attr">title</span>=<span class="value">"Example Website"</span>
            <span class="tag">&gt;&lt;/iframe&gt;</span>
        </div>

        <h3>iframe with targeting:</h3>
        <div class="code-block">
            <span class="tag">&lt;iframe</span> 
            <span class="attr">name</span>=<span class="value">"myframe"</span> 
            <span class="attr">src</span>=<span class="value">"https://www.google.com"</span> 
            <span class="attr">width</span>=<span class="value">"100%"</span> 
            <span class="attr">height</span>=<span class="value">"400"</span> 
            <span class="attr">allowfullscreen</span>
            <span class="tag">&gt;&lt;/iframe&gt;</span>

            <span class="tag">&lt;a</span> 
            <span class="attr">href</span>=<span class="value">"https://fedoraproject.org/"</span> 
            <span class="attr">target</span>=<span class="value">"myframe"</span>
            <span class="tag">&gt;</span>Fedora OS<span class="tag">&lt;/a&gt;</span>
        </div>

        <h3>YouTube embed with controls:</h3>
        <div class="code-block">
            <span class="tag">&lt;iframe</span> 
            <span class="attr">width</span>=<span class="value">"100%"</span> 
            <span class="attr">height</span>=<span class="value">"315"</span> 
            <span class="attr">src</span>=<span class="value">"https://www.youtube.com/embed/VIDEO_ID"</span> 
            <span class="attr">allow</span>=<span class="value">"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"</span> 
            <span class="attr">allowfullscreen</span>
            <span class="tag">&gt;&lt;/iframe&gt;</span>
        </div>
    </div>

    <!-- ====== SECTION 7: SECURITY (SANDBOX) ====== -->
    <div class="container">
        <h2>7. iframe Security with Sandbox</h2>

        <div class="example-box" style="border-left-color: #dc3545;">
            <h3 style="color: #dc3545;">Sandbox Attribute</h3>
            <p>The <code>sandbox</code> attribute adds security restrictions to the iframe content.</p>

            <ul>
                <li><code>sandbox=""</code> — All restrictions applied</li>
                <li><code>sandbox="allow-scripts"</code> — Allows JavaScript</li>
                <li><code>sandbox="allow-same-origin"</code> — Allows same-origin access</li>
                <li><code>sandbox="allow-forms"</code> — Allows forms</li>
                <li><code>sandbox="allow-popups"</code> — Allows popups</li>
            </ul>
        </div>

        <h3>Secure iframe with sandbox:</h3>
        <div class="code-block">
            <span class="tag">&lt;iframe</span> 
            <span class="attr">src</span>=<span class="value">"https://www.example.com"</span> 
            <span class="attr">sandbox</span>=<span class="value">"allow-scripts"</span> 
            <span class="attr">width</span>=<span class="value">"100%"</span> 
            <span class="attr">height</span>=<span class="value">"300"</span> 
            <span class="attr">title</span>=<span class="value">"Secure iframe"</span>
            <span class="tag">&gt;&lt;/iframe&gt;</span>
        </div>

        <iframe src="https://www.example.com" 
                sandbox="allow-scripts" 
                width="100%" 
                height="300" 
                title="Secure iframe with sandbox">
        </iframe>
        <p><small>Note: This iframe has <code>sandbox="allow-scripts"</code> which allows JavaScript but restricts other features.</small></p>
    </div>

</body>
</html>

Common Use Cases for iframes

Use Case	Example
Embedding Videos	YouTube, Vimeo, Twitch
Embedding Maps	Google Maps, OpenStreetMap
Social Media	Twitter/X, Instagram, Facebook
Forms	Embedded contact forms, surveys
Music Players	Spotify, SoundCloud
Documents	PDF viewers, Google Docs
Advertisements	Banner ads, sponsored content
Third-party Content	Weather widgets, stock tickers

Security Considerations

Attribute	Purpose
`sandbox`	Applies security restrictions to the iframe
`allow`	Specifies which features are allowed (e.g., `autoplay`, `encrypted-media`)
`referrerpolicy`	Controls referrer information sent
`loading="lazy"`	Defers loading until needed (performance)

Best Practices

✅ Do This:

<!-- Always include a title for accessibility -->
<iframe src="video.mp4" title="Product Demo Video"></iframe>

<!-- Use appropriate width and height -->
<iframe src="map.html" width="100%" height="450"></iframe>

<!-- Add allowfullscreen for videos -->
<iframe src="youtube.com/embed/VIDEO" allowfullscreen></iframe>

<!-- Use loading="lazy" for off-screen iframes -->
<iframe src="content.html" loading="lazy"></iframe>

<!-- Add sandbox for untrusted content -->
<iframe src="untrusted.html" sandbox="allow-scripts"></iframe>

❌ Don’t Do This:

<!-- Don't forget the title attribute -->
<iframe src="video.mp4"></iframe>

<!-- Don't use fixed widths that break layouts -->
<iframe src="content.html" width="800" height="600"></iframe>

<!-- Don't embed untrusted content without sandbox -->
<iframe src="untrusted.com"></iframe>

<!-- Don't set frameborder (deprecated), use CSS instead -->
<iframe frameborder="0"></iframe>

Quick Reference

Element/Attribute	Purpose	Example
`<iframe>`	Embeds an external document	`<iframe src="url"></iframe>`
`src`	URL to display	`src="https://example.com"`
`name`	Targets iframe with links	`name="myframe"`
`width`, `height`	Dimensions	`width="100%" height="400"`
`allowfullscreen`	Enables full-screen mode	`allowfullscreen`
`title`	Accessibility title	`title="Embedded Video"`
`sandbox`	Security restrictions	`sandbox="allow-scripts"`
`loading`	Lazy loading	`loading="lazy"`

Pro Tip: Always use the title attribute for iframes to improve accessibility. For security, always use the sandbox attribute when embedding untrusted content. And consider using loading="lazy" to improve page load performance for iframes that are not immediately visible.

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!