HTML <embed> Tag

Beginner
⏱️ 6 min read
📚 Updated: Jun 2026
🎯 4 Examples
HTML5 Media
HTML embed tag tutorial — embedding multimedia and PDF content
Overview

What You’ll Learn

By the end of this tutorial, you’ll embed external media and documents into web pages with the <embed> element.

The <embed> tag is a versatile HTML element for inserting external content—such as multimedia files, PDFs, and other resources—directly within a web page. This guide walks through syntax, attributes, and best practices.

01

Core Syntax

Use src and type on the void <embed> element.

02

Key Attributes

Control size with width and height attributes.

03

Audio & Video

Embed sound and video files when native tags are not suitable.

04

PDF Documents

Display PDF files inline in the browser viewport.

05

embed vs iframe

Know when to embed media vs nest another HTML page.

06

Browser Testing

Verify MIME types and rendering across browsers.

Fundamentals

What Is the <embed> Tag?

The embed element (<embed>) embeds external content seamlessly into a web page. It supports various media types including audio, video, PDF documents, and—historically—browser plugin content.

💡
Prefer native media tags when possible

For audio and video playback with controls and accessibility, use <audio> and <video>. Reach for <embed> for PDFs and other external content those tags do not handle.

<embed> is a void element—it has no closing tag. The browser loads the resource pointed to by src and renders it using the MIME type from type.

Foundation

📝 Syntax

Provide src and type in the opening tag. Here is a basic audio example:

syntax.html
<embed src="audio.mp3" type="audio/mpeg">

Syntax Rules

  • <embed> is a void element—do not use a closing tag.
  • Set type to the correct MIME type so browsers handle the resource properly.
  • Use width and height for visual media and documents.
  • Test embedded content in target browsers—behavior depends on file type and browser support.
Cheat Sheet

⚡ Quick Reference

AttributeExamplePurpose
srcsrc="video.mp4"URL of the embedded resource
typetype="video/mp4"MIME type of the content
widthwidth="640"Rendered width in pixels
heightheight="360"Rendered height in pixels
Audio MIMEaudio/mpegMP3 files (not audio/mp3)
PDF MIMEapplication/pdfInline PDF documents
Comparison

⚖️ <embed> vs <iframe>

Both insert external content, but they serve different purposes:

Feature<embed><iframe>
Element typeVoid elementContainer with closing tag
Typical contentMedia files, PDFsHTML pages, maps, widgets
Nested browsing contextNoYes — separate document
Key attributessrc, typesrc, title, sandbox
Comparison

⚖️ <embed> vs <audio> / <video>

For sound and moving images, native HTML5 media tags are usually the better choice:

NeedRecommended tagWhy
Audio with controls<audio>Native player, source fallbacks, accessibility
Video with controls<video>Native player, poster, track captions
PDF document<embed>No dedicated PDF element in HTML
Legacy plugin content<embed> (historical)Flash and plugins are deprecated today
Reference

🧰 Attributes

The <embed> tag supports these key attributes plus global attributes such as title and class:

src Required

URL of the file or resource to embed in the page.

src="video.mp4"
type MIME

MIME type of the embedded content—helps the browser choose the correct handler.

type="video/mp4"
width Layout

Width of the embedded content area in pixels or CSS units.

width="640"
height Layout

Height of the embedded content area in pixels or CSS units.

height="360"
attributes.html
<embed src="video.mp4" type="video/mp4" width="640" height="360">

Always match type to the actual MIME type of the file—for example audio/mpeg for MP3, not audio/mp3.

Hands-On

Examples Gallery

Audio, video, PDF, and legacy plugin patterns with copy-ready code and live previews.

Live Preview

Embedded audio via <embed> (browser-dependent rendering):

Embedding Audio

Include an audio file within your webpage using the <embed> tag.

embedding-audio.html
<embed src="background_music.mp3" type="audio/mpeg">
Try It Yourself

📚 Common Use Cases

Use <embed> to integrate audio clips, presentation videos, inline PDF manuals, and—in legacy pages—plugin-based interactive content. For everyday audio and video players, prefer <audio> and <video>.

Integrating Video

Embed videos with explicit dimensions for a more interactive and engaging user experience.

integrating-video.html
<embed src="presentation.mp4" type="video/mp4" width="800" height="450">
Try It Yourself

Embedding a PDF Document

Display a PDF inline when you need a document viewer without leaving the page.

embed-pdf.html
<embed src="manual.pdf" type="application/pdf" width="600" height="400">
Try It Yourself

Interactive Applications (Legacy)

Historically, <embed> loaded Flash and other browser plugins. Flash is deprecated—keep this pattern only when maintaining very old content.

interactive-applications.html
<embed src="interactive_app.swf" type="application/x-shockwave-flash" width="400" height="300">
Try It Yourself
Design

Styling <embed> with CSS

Size and layout embedded content with width and height attributes or CSS on a wrapper:

width / height Control embed dimensions
max-width: 100% Responsive embeds
aspect-ratio Keep video proportions
display: block Remove inline gap
embed-styles.css
/* Responsive video embed */
.media-embed {
  max-width: 100%;
  display: block;
}

.media-embed embed {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

Sized embed preview

A11y

♿ Accessibility

Embedded content needs extra care for all users:

  • Add a title attribute — describe what the embedded resource contains.
  • Prefer audio/video tags — native media elements support controls and captions better than embed.
  • Provide a download link — offer PDFs and media files as direct links for users who cannot view embeds.
  • Test keyboard access — embedded plugin content often lacks proper keyboard support.

🧠 How <embed> Works

1

Author sets src and type

Point src at the file URL and set the matching MIME type.

Markup
2

Browser loads the resource

The user agent fetches the file and selects a handler based on MIME type.

Network
3

Content renders inline

Audio, video, PDF, or legacy plugin UI appears at the specified width and height.

Rendering
=

External content in-page

Users interact with media or documents without navigating away from your site.

Compatibility

Universal Browser Support

The <embed> element is supported in all modern browsers. Internet Explorer has partial support with limitations depending on the embedded content type.

✓ Baseline · Since HTML5

Embed external content in modern browsers

Chrome, Firefox, Safari, Edge, and Opera fully support embed for common media and PDF types. Test your specific file format in each target browser.

98% Modern browser support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer Partial · Content-type dependent
Partial support
Opera All modern versions
Full support
<embed> tag 98% supported

Bottom line: Ship embeds with confidence in modern browsers. Match MIME types correctly, set dimensions, and test in IE only if you still support legacy environments.

Wrap Up

Conclusion

The <embed> tag is a powerful tool for incorporating external content seamlessly into your web pages. Whether you are embedding multimedia or PDF documents, understanding its capabilities and best practices helps you create a rich and engaging user experience.

Set accurate MIME types, specify width and height, prefer <audio> and <video> for native media playback, and test across browsers before you ship.

View Examples Gallery Try video embed
Pro Tips

💡 Best Practices

✅ Do

  • Set type to the correct MIME type
  • Specify width and height for visual embeds
  • Use <audio> and <video> for media when possible
  • Test embedded content across target browsers

❌ Don’t

  • Use incorrect MIME types like audio/mp3
  • Rely on Flash or deprecated plugins for new projects
  • Embed content without a fallback download link
  • Skip dimension attributes for video and PDF embeds
Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about <embed>

Bookmark these before you ship — they’ll keep your embedded content reliable and accessible.

6
Core concepts
📤 01

External Content

<embed> inserts media and documents into the page.

Foundation
🔗 02

src + type

URL and MIME type tell the browser what to load.

Attributes
📐 03

Size Matters

Set width and height for video and PDF embeds.

Layout
🎵 04

Prefer Native Tags

Use audio and video for everyday media playback.

Best practice
📄 05

PDF Use Case

Embed is common for inline PDF documents.

Pattern
🌐 06

Test Browsers

Modern browsers: full support. IE: partial.

Compatibility
🎯 You’re ready to embed external content
Review Quick Reference →

❓ Frequently Asked Questions

It inserts external content such as audio, video, or PDF files into a page using src and type attributes.
embed loads media and documents directly. iframe nests another HTML browsing context, such as a web page or widget.
Prefer <audio> and <video> for media with controls and accessibility. Use <embed> for PDFs and other content those tags do not cover.
Use audio/mpeg, not audio/mp3. Accurate MIME types help browsers handle files correctly.
IE has partial support with limitations depending on the embedded content type. All modern browsers support embed for common media and PDF formats.

Practice Embedding Content

Embed audio, video, and PDF files in the interactive HTML editor.

Try video embed →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

HTML em Tag HTML fieldset Tag