HTML 24 💻 embed and object elements - KandZ

24. embed and object Elements

The <embed> and <object> elements are used to embed external resources like videos, audio files, PDFs, or even entire web pages into an HTML document. While they are older than <video> and <audio>, they still have useful applications.

Overview of Embedding Elements

Element	Purpose	Key Features
`<embed>`	Embeds external content	Simple, no fallback support
`<object>`	Embeds external content	Supports fallback content

The Embed Element `<embed>`

The <embed> element is a simple way to embed external resources like videos, audio, or interactive content.

Basic Syntax:

<embed src="file.mp4" width="640" height="360" title="Video Title" type="video/mp4">

Attributes:

Attribute	Purpose	Example
`src`	URL of the resource	`src="video.mp4"`
`type`	MIME type of the resource	`type="video/mp4"`
`width`	Width of the embedded content	`width="640"`
`height`	Height of the embedded content	`height="360"`
`title`	Description of the content (accessibility)	`title="My Video"`

Important Notes:

❌ Does not work with YouTube URLs — use YouTube’s embed iframe instead
✅ Works with local video/audio files
❌ No fallback content — if not supported, nothing is shown
✅ Can embed PDFs, images, and other media

The Object Element `<object>`

The <object> element is a versatile and more robust way to embed external resources. It supports fallback content if the resource cannot be loaded.

Basic Syntax:

<object type="video/mp4" data="video.mp4" width="450" height="300">
    <p>Your browser does not support this content.</p>
    <a href="video.mp4">Download the video</a>
</object>

Attributes:

Attribute	Purpose	Example
`data`	URL of the resource	`data="video.mp4"`
`type`	MIME type of the resource	`type="video/mp4"`
`width`	Width of the embedded content	`width="450"`
`height`	Height of the embedded content	`height="300"`
`name`	Name of the object	`name="myPlayer"`
`form`	Associates with a form	`form="myForm"`

Important Notes:

✅ Supports fallback content — the inner HTML is shown if the object cannot be loaded
✅ Supports PDFs, images, HTML documents, and more
✅ Can be used with Java applets and Flash (legacy)

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>embed and object Elements</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background: #f8f9fa;
            line-height: 1.6;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            margin-top: 30px;
            border-left: 4px solid #28a745;
            padding-left: 15px;
        }

        .media-container {
            background: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
            margin: 20px 0;
        }

        .warning-box {
            background: #fff3cd;
            border: 2px solid #ffc107;
            padding: 15px;
            border-radius: 8px;
            margin: 15px 0;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .warning-box .icon {
            font-size: 1.5em;
        }

        embed, object {
            max-width: 100%;
            border-radius: 8px;
            border: 2px solid #ddd;
            background: #1e1e1e;
        }

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

        code {
            background: #f4f4f4;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            font-size: 0.95em;
            color: #dc3545;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 12px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        .reference-table tr:hover {
            background: #e9ecef;
        }

        .comparison-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 15px 0;
        }

        .comparison-card {
            flex: 1;
            min-width: 250px;
            background: white;
            padding: 20px;
            border-radius: 8px;
            border: 2px solid #ddd;
        }

        .comparison-card h3 {
            margin-top: 0;
            padding-bottom: 10px;
            border-bottom: 2px solid #ddd;
        }

        .comparison-card .check { color: #28a745; }
        .comparison-card .cross { color: #dc3545; }
    </style>
</head>
<body>

    <h1>embed and object Elements</h1>

    <!-- ====== WARNING ====== -->
    <div class="warning-box">
        <span class="icon">⚠️</span>
        <div>
            <strong>Important:</strong> The examples below use local files. If you see a blank area or error, it's because the file wasn't found.
            <br>
            <strong>Note:</strong> These elements <strong>do not work with YouTube links</strong>.
        </div>
    </div>

    <!-- ====== EMBED ELEMENT ====== -->
    <h2>1. The embed Element</h2>

    <div class="media-container">
        <h3>Embedding a Video</h3>

        <embed src="https://www.w3schools.com/html/mov_bbb.mp4" 
               width="640" 
               height="360" 
               title="Big Buck Bunny" 
               type="video/mp4">

        <div class="example-box">
            <h4>🔍 Code:</h4>
            <pre style="background: #f4f4f4; padding: 10px; border-radius: 4px; overflow-x: auto;">
                <code>&lt;embed src="video.mp4" width="640" height="360" title="Big Buck Bunny" type="video/mp4"&gt;</code>
            </pre>
            <ul>
                <li>✅ Simple to use</li>
                <li>❌ No fallback content</li>
                <li>❌ Does not support YouTube links</li>
            </ul>
        </div>
    </div>

    <!-- ====== OBJECT ELEMENT ====== -->
    <h2>2. The object Element</h2>

    <div class="media-container">
        <h3>Object with Fallback Content</h3>

        <object type="video/mp4" 
                data="https://www.w3schools.com/html/mov_bbb.mp4" 
                width="640" 
                height="360">
            <div style="background: #f8d7da; padding: 40px; border-radius: 8px; text-align: center; border: 2px dashed #dc3545;">
                <p style="font-size: 1.2em;">🚫 Your browser does not support this content.</p>
                <p><a href="https://www.w3schools.com/html/mov_bbb.mp4" download>Download the video</a></p>
            </div>
        </object>

        <div class="example-box">
            <h4>🔍 Code:</h4>
            <pre style="background: #f4f4f4; padding: 10px; border-radius: 4px; overflow-x: auto;">
                <code>&lt;object type="video/mp4" data="video.mp4" width="640" height="360"&gt;
                    &lt;p&gt;Your browser does not support this content.&lt;/p&gt;
                    &lt;a href="video.mp4"&gt;Download the video&lt;/a&gt;
                &lt;/object&gt;</code>
            </pre>
            <ul>
                <li>✅ Supports fallback content</li>
                <li>✅ More versatile</li>
                <li>❌ Does not support YouTube links</li>
            </ul>
        </div>
    </div>

    <!-- ====== EMBEDDING PDF ====== -->
    <div class="media-container">
        <h3>Embedding a PDF</h3>

        <object type="application/pdf" 
                data="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" 
                width="100%" 
                height="500">
            <div style="background: #f8d7da; padding: 40px; border-radius: 8px; text-align: center; border: 2px dashed #dc3545;">
                <p style="font-size: 1.2em;">📄 Your browser cannot display this PDF.</p>
                <p><a href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" target="_blank">Open PDF in new tab</a></p>
            </div>
        </object>

        <div class="example-box">
            <h4>🔍 Code:</h4>
            <pre style="background: #f4f4f4; padding: 10px; border-radius: 4px; overflow-x: auto;">
                <code>&lt;object type="application/pdf" data="document.pdf" width="100%" height="500"&gt;
                    &lt;p&gt;Your browser cannot display this PDF.&lt;/p&gt;
                    &lt;a href="document.pdf"&gt;Open PDF&lt;/a&gt;
                &lt;/object&gt;</code>
            </pre>
        </div>
    </div>

    <!-- ====== EMBEDDING IMAGE ====== -->
    <div class="media-container">
        <h3>Embedding an Image</h3>

        <object type="image/png" 
                data="https://via.placeholder.com/800x300/007bff/ffffff?text=Embedded+Image" 
                width="100%" 
                height="300">
            <p>Image could not be loaded.</p>
        </object>

        <div class="example-box">
            <h4>🔍 Code:</h4>
            <pre style="background: #f4f4f4; padding: 10px; border-radius: 4px; overflow-x: auto;">
                <code>&lt;object type="image/png" data="image.png" width="100%" height="300"&gt;
                    &lt;p&gt;Image could not be loaded.&lt;/p&gt;
                &lt;/object&gt;</code>
            </pre>
        </div>
    </div>

    <!-- ====== COMPARISON ====== -->
    <h2>3. Comparison: embed vs object</h2>

    <div class="comparison-grid">
        <div class="comparison-card">
            <h3>🔲 embed</h3>
            <ul>
                <li><span class="check">✅</span> Simple syntax</li>
                <li><span class="cross">❌</span> No fallback content</li>
                <li><span class="cross">❌</span> Limited attributes</li>
                <li><span class="cross">❌</span> No YouTube support</li>
                <li><span class="check">✅</span> Fast loading</li>
            </ul>
        </div>

        <div class="comparison-card">
            <h3>📦 object</h3>
            <ul>
                <li><span class="check">✅</span> Supports fallback content</li>
                <li><span class="check">✅</span> More attributes</li>
                <li><span class="check">✅</span> More versatile</li>
                <li><span class="cross">❌</span> No YouTube support</li>
                <li><span class="check">✅</span> Better accessibility</li>
            </ul>
        </div>
    </div>

    <!-- ====== REFERENCE TABLES ====== -->
    <h2>4. Quick Reference</h2>

    <h3>embed Attributes</h3>
    <table class="reference-table">
        <thead>
            <tr>
                <th>Attribute</th>
                <th>Purpose</th>
                <th>Example</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>src</code></td>
                <td>URL of the resource</td>
                <td><code>src="video.mp4"</code></td>
            </tr>
            <tr>
                <td><code>type</code></td>
                <td>MIME type</td>
                <td><code>type="video/mp4"</code></td>
            </tr>
            <tr>
                <td><code>width</code>/<code>height</code></td>
                <td>Dimensions</td>
                <td><code>width="640" height="360"</code></td>
            </tr>
        </tbody>
    </table>

    <h3>object Attributes</h3>
    <table class="reference-table">
        <thead>
            <tr>
                <th>Attribute</th>
                <th>Purpose</th>
                <th>Example</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>data</code></td>
                <td>URL of the resource</td>
                <td><code>data="video.mp4"</code></td>
            </tr>
            <tr>
                <td><code>type</code></td>
                <td>MIME type</td>
                <td><code>type="video/mp4"</code></td>
            </tr>
            <tr>
                <td><code>width</code>/<code>height</code></td>
                <td>Dimensions</td>
                <td><code>width="640" height="360"</code></td>
            </tr>
            <tr>
                <td><code>name</code></td>
                <td>Name for scripting</td>
                <td><code>name="myPlayer"</code></td>
            </tr>
            <tr>
                <td><code>form</code></td>
                <td>Associates with a form</td>
                <td><code>form="myForm"</code></td>
            </tr>
        </tbody>
    </table>

    <h3>Common MIME Types</h3>
    <table class="reference-table">
        <thead>
            <tr>
                <th>Content Type</th>
                <th>MIME Type</th>
                <th>Use Case</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Video</td>
                <td><code>video/mp4</code></td>
                <td>MP4 videos</td>
            </tr>
            <tr>
                <td>Video</td>
                <td><code>video/webm</code></td>
                <td>WebM videos</td>
            </tr>
            <tr>
                <td>Audio</td>
                <td><code>audio/mpeg</code></td>
                <td>MP3 audio</td>
            </tr>
            <tr>
                <td>PDF</td>
                <td><code>application/pdf</code></td>
                <td>PDF documents</td>
            </tr>
            <tr>
                <td>Image</td>
                <td><code>image/png</code></td>
                <td>PNG images</td>
            </tr>
            <tr>
                <td>Image</td>
                <td><code>image/jpeg</code></td>
                <td>JPEG images</td>
            </tr>
            <tr>
                <td>HTML</td>
                <td><code>text/html</code></td>
                <td>HTML pages</td>
            </tr>
        </tbody>
    </table>

    <!-- ====== BEST PRACTICES ====== -->
    <h2>5. Best Practices</h2>

    <div style="background: #d4edda; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
        <h3 style="margin-top: 0; color: #155724;">✅ Do This:</h3>
        <ul>
            <li>Use <code>&lt;object&gt;</code> instead of <code>&lt;embed&gt;</code> when you need <strong>fallback content</strong></li>
            <li>Include a <strong>download link</strong> in the fallback content</li>
            <li>Use the <strong>correct MIME type</strong> for your content</li>
            <li>Set appropriate <code>width</code> and <code>height</code> for your content</li>
            <li>Use <code>title</code> attribute for <strong>accessibility</strong></li>
            <li>Consider using <code>&lt;video&gt;</code> or <code>&lt;audio&gt;</code> for modern media</li>
        </ul>
    </div>

    <div style="background: #f8d7da; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; margin-top: 15px;">
        <h3 style="margin-top: 0; color: #721c24;">❌ Don't Do This:</h3>
        <ul>
            <li>Don't use <code>&lt;embed&gt;</code> or <code>&lt;object&gt;</code> with <strong>YouTube URLs</strong> (they won't work)</li>
            <li>Don't forget to include <strong>fallback content</strong> with <code>&lt;object&gt;</code></li>
            <li>Don't use <code>&lt;embed&gt;</code> without a <code>type</code> attribute</li>
            <li>Don't rely solely on these for video — use <code>&lt;video&gt;</code> when possible</li>
            <li>Don't use <code>&lt;object&gt;</code> for <strong>modern video</strong> — use <code>&lt;video&gt;</code> instead</li>
        </ul>
    </div>

</body>
</html>

Quick Reference

Element	Purpose	Fallback	YouTube Support
`<embed>`	Embed external content	❌ No	❌ No
`<object>`	Embed external content with fallback	✅ Yes	❌ No

When to Use What

Content Type	Recommended Element
Modern video	`<video>` with `<source>`
Modern audio	`<audio>` with `<source>`
PDF documents	`<object>` or `<iframe>`
Images	`<img>` or `<picture>`
Legacy content	`<object>`
Simple embedded media	`<embed>`

Pro Tip: For modern web development, prefer <video>, <audio>, and <iframe> over <embed> and <object>. However, <object> is still valuable for embedding PDFs and other documents where you need fallback content. Always test your embedded content across different browsers!

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!

24. embed and object Elements

Overview of Embedding Elements

The Embed Element <embed>

Basic Syntax:

Attributes:

The Object Element <object>

Basic Syntax:

Attributes:

Complete Example

Quick Reference

When to Use What

Ads Blocker Detected!!!

The Embed Element `<embed>`

The Object Element `<object>`