Skip to content

05. Embedding Media

Introduction

Embedding media from external sources is common in web development. HTML provides several methods for embedding content, including <iframe>, <embed>, <object>, and platform-specific embed codes. Understanding these methods helps you integrate external content effectively.

iframe Element

Embed external pages:

<iframe src="https://example.com/page.html" width="800" height="600"></iframe>

embed Element

Embed external content:

<embed src="content.swf" type="application/x-shockwave-flash" width="400" height="300">

object Element

Embed external resources:

<object data="content.pdf" type="application/pdf" width="800" height="600">
    <p>Fallback content</p>
</object>

Common Use Cases

YouTube Videos

<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    frameborder="0"
    allowfullscreen>
</iframe>

Maps

<iframe
    src="https://www.google.com/maps/embed?pb=..."
    width="600"
    height="450"
    style="border:0;">
</iframe>

Best Practices

Use iframe for External Content

<iframe
    src="https://example.com"
    title="Embedded content"
    width="800"
    height="600">
</iframe>

Include Fallback

<iframe src="content.html">
    <p>Your browser does not support iframes.</p>
</iframe>

References