<embed> - External Application Element

The `<embed>` Element

Embedded Content HTML 5.0

The embed element embeds external content at the specified point in the document. Historically used for browser plugins like Flash, it’s now primarily used for embedding PDFs and SVG files, though modern alternatives are often preferred.

Quick Example

<!-- Embedding a PDF document -->
<embed
src="document.pdf"
type="application/pdf"
width="600"
height="400"
title="PDF Document">

<!-- Embedding an SVG image -->
<embed
src="logo.svg"
type="image/svg+xml"
width="200"
height="100"
title="Company Logo">

<!-- Embedding a video (legacy - use <video> instead) -->
<embed
src="video.mp4"
type="video/mp4"
width="640"
height="360"
title="Video Player">

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- Embedding a PDF document -->
<embed
src="document.pdf"
type="application/pdf"
width="600"
height="400"
title="PDF Document">

<!-- Embedding an SVG image -->
<embed
src="logo.svg"
type="image/svg+xml"
width="200"
height="100"
title="Company Logo">

<!-- Embedding a video (legacy - use <video> instead) -->
<embed
src="video.mp4"
type="video/mp4"
width="640"
height="360"
title="Video Player">

Syntax

<embed src="file.pdf" type="application/pdf">

The <embed> element is a void element (self-closing) and does not have a closing tag or child content.

Attributes

Essential Attributes

Attribute	Description	Example
`src`	URL of the external resource	`src="document.pdf"`
`type`	MIME type of the embedded content	`type="application/pdf"`
`width`	Width in pixels	`width="600"`
`height`	Height in pixels	`height="400"`
`title`	Accessible description (recommended)	`title="Annual Report PDF"`

Plugin-Specific Attributes

The <embed> element accepts any attributes, which are passed to the plugin or application handling the content:

<!-- PDF with custom parameters -->
<embed
  src="document.pdf"
  type="application/pdf"
  toolbar="0"
  navpanes="0"
  scrollbar="0">

<!-- Flash (legacy example) -->
<embed
  src="animation.swf"
  type="application/x-shockwave-flash"
  quality="high"
  wmode="transparent">

Common Use Cases

Embedding PDF Documents

<!-- Basic PDF embed -->
<embed
src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
type="application/pdf"
width="100%"
height="600"
title="Sample PDF Document">

<!-- PDF without toolbar -->
<embed
src="document.pdf#toolbar=0&navpanes=0&scrollbar=0"
type="application/pdf"
width="800"
height="600"
title="PDF without navigation">

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- Basic PDF embed -->
<embed
src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
type="application/pdf"
width="100%"
height="600"
title="Sample PDF Document">

<!-- PDF without toolbar -->
<embed
src="document.pdf#toolbar=0&navpanes=0&scrollbar=0"
type="application/pdf"
width="800"
height="600"
title="PDF without navigation">

PDF URL Parameters:

#page=3 - Open to specific page
#zoom=150 - Set zoom level (percentage)
#toolbar=0 - Hide toolbar
#navpanes=0 - Hide navigation panes
#scrollbar=0 - Hide scrollbar
#view=FitH - Fit width
#pagemode=bookmarks - Show bookmarks

<embed>
<iframe> (Better)

<embed
  src="document.pdf"
  type="application/pdf"
  width="600"
  height="400">

<iframe
  src="document.pdf"
  width="600"
  height="400"
  title="PDF Document">
  <p>Your browser does not support PDFs.
    <a href="document.pdf">Download the PDF</a>.</p>
</iframe>

Embedding SVG Images

<!-- Inline SVG embed -->
<embed
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='100'%3E%3Crect width='200' height='100' fill='%233b82f6'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='white' font-size='20'%3ESVG Logo%3C/text%3E%3C/svg%3E"
type="image/svg+xml"
width="200"
height="100"
title="SVG Logo">

<!-- External SVG file -->
<embed
src="graphic.svg"
type="image/svg+xml"
width="300"
height="200"
title="Vector Graphic">

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- Inline SVG embed -->
<embed
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='100'%3E%3Crect width='200' height='100' fill='%233b82f6'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='white' font-size='20'%3ESVG Logo%3C/text%3E%3C/svg%3E"
type="image/svg+xml"
width="200"
height="100"
title="SVG Logo">

<!-- External SVG file -->
<embed
src="graphic.svg"
type="image/svg+xml"
width="300"
height="200"
title="Vector Graphic">

Embedding Video/Audio (Legacy)

<!-- Legacy video embed (DON'T USE) -->
<embed
src="video.mp4"
type="video/mp4"
width="640"
height="360"
autostart="false"
loop="false">

<!-- Modern alternative (USE THIS) -->
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- Legacy video embed (DON'T USE) -->
<embed
src="video.mp4"
type="video/mp4"
width="640"
height="360"
autostart="false"
loop="false">

<!-- Modern alternative (USE THIS) -->
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>

Embedding QuickTime Movies (Legacy)

<!-- Legacy QuickTime embed -->
<embed
  src="movie.mov"
  type="video/quicktime"
  width="640"
  height="480"
  controller="true"
  autoplay="false"
  pluginspage="http://www.apple.com/quicktime/download/">

Modern Alternatives

Use Case Comparison

Content Type	Legacy (`<embed>`)	Modern Alternative
PDF	`<embed src="file.pdf">`	`<iframe src="file.pdf">` or `<object>`
SVG	`<embed src="file.svg">`	`<img src="file.svg">` or inline SVG
Video	`<embed src="video.mp4">`	`<video><source src="video.mp4"></video>`
Audio	`<embed src="audio.mp3">`	`<audio><source src="audio.mp3"></audio>`
Flash	`<embed src="file.swf">`	Use HTML5/JavaScript/CSS instead
Images	`<embed src="image.jpg">`	`<img src="image.jpg">`
External HTML	`<embed src="page.html">`	`<iframe src="page.html">`

When to Use Each Element

Rare Cases Only: Legacy system compatibility, specific plugin requirements, quick PDF embedding (though <iframe> is better).

Limitations: No fallback content, poor accessibility, browser-dependent behavior, no standardized attributes.

Accessibility

Provide Alternative Content

Since <embed> doesn’t support fallback content, provide alternatives nearby:

<div class="embed-wrapper">
<embed
  src="document.pdf"
  type="application/pdf"
  width="100%"
  height="600"
  title="Annual Report 2024"
  aria-label="Annual Report 2024 PDF">

<p class="embed-fallback">
  <a href="document.pdf" download>Download Annual Report 2024 (PDF, 2.5 MB)</a>
</p>
</div>

<style>
.embed-fallback {
  margin-top: 10px;
  font-size: 14px;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="embed-wrapper">
<embed
  src="document.pdf"
  type="application/pdf"
  width="100%"
  height="600"
  title="Annual Report 2024"
  aria-label="Annual Report 2024 PDF">

<p class="embed-fallback">
  <a href="document.pdf" download>Download Annual Report 2024 (PDF, 2.5 MB)</a>
</p>
</div>

<style>
.embed-fallback {
  margin-top: 10px;
  font-size: 14px;
}
</style>

<embed
  src="presentation.pdf"
  type="application/pdf"
  width="800"
  height="600"
  title="Q4 Sales Presentation - Annual Review">

<embed
  src="chart.svg"
  type="image/svg+xml"
  width="600"
  height="400"
  title="Revenue Growth Chart 2024"
  aria-label="Bar chart showing 15% revenue growth">

<!-- No title - screen readers can't describe content -->
<embed
  src="presentation.pdf"
  type="application/pdf"
  width="800"
  height="600">

<!-- Generic title - not helpful -->
<embed
  src="chart.svg"
  type="image/svg+xml"
  title="Image">

ARIA Attributes

<!-- Interactive embedded application -->
<embed
src="calculator.swf"
type="application/x-shockwave-flash"
width="300"
height="400"
title="Financial Calculator"
role="application"
aria-label="Interactive financial calculator">

<!-- Decorative embed -->
<embed
src="decorative.svg"
type="image/svg+xml"
width="100"
height="100"
title="Decorative pattern"
role="img"
aria-hidden="true">

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- Interactive embedded application -->
<embed
src="calculator.swf"
type="application/x-shockwave-flash"
width="300"
height="400"
title="Financial Calculator"
role="application"
aria-label="Interactive financial calculator">

<!-- Decorative embed -->
<embed
src="decorative.svg"
type="image/svg+xml"
width="100"
height="100"
title="Decorative pattern"
role="img"
aria-hidden="true">

<!-- Allow keyboard focus (default) -->
<embed
src="document.pdf"
type="application/pdf"
width="600"
height="400"
title="Accessible document">

<!-- Remove from tab order if not interactive -->
<embed
src="decorative.svg"
type="image/svg+xml"
width="200"
height="100"
title="Decorative graphic"
tabindex="-1">

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- Allow keyboard focus (default) -->
<embed
src="document.pdf"
type="application/pdf"
width="600"
height="400"
title="Accessible document">

<!-- Remove from tab order if not interactive -->
<embed
src="decorative.svg"
type="image/svg+xml"
width="200"
height="100"
title="Decorative graphic"
tabindex="-1">

Styling

Basic Styling

<style>
.styled-embed {
  border: 2px solid #3b82f6;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: block;
  margin: 20px auto;
}

.responsive-embed {
  max-width: 100%;
  height: auto;
}
</style>

<embed
src="document.pdf"
type="application/pdf"
class="styled-embed"
width="600"
height="400"
title="Styled PDF Document">

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.styled-embed {
  border: 2px solid #3b82f6;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: block;
  margin: 20px auto;
}

.responsive-embed {
  max-width: 100%;
  height: auto;
}
</style>

<embed
src="document.pdf"
type="application/pdf"
class="styled-embed"
width="600"
height="400"
title="Styled PDF Document">

Responsive Embedding

<style>
.embed-container {
  position: relative;
  padding-bottom: 75%; /* 4:3 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
</style>

<div class="embed-container">
<embed
  src="document.pdf"
  type="application/pdf"
  title="Responsive PDF">
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.embed-container {
  position: relative;
  padding-bottom: 75%; /* 4:3 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
</style>

<div class="embed-container">
<embed
  src="document.pdf"
  type="application/pdf"
  title="Responsive PDF">
</div>

JavaScript Interaction

Detecting Plugin Support

<script>
// Check if browser supports a specific MIME type
function supportsType(mimeType) {
  const embed = document.createElement('embed');
  embed.type = mimeType;

  // Check if type is supported
  return navigator.mimeTypes[mimeType] !== undefined;
}

// Check PDF support
if (supportsType('application/pdf')) {
  console.log('PDF plugin available');
} else {
  console.log('No PDF plugin - provide alternative');
}

// Check Flash support (deprecated)
if (supportsType('application/x-shockwave-flash')) {
  console.log('Flash plugin available (deprecated)');
}
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<script>
// Check if browser supports a specific MIME type
function supportsType(mimeType) {
  const embed = document.createElement('embed');
  embed.type = mimeType;

  // Check if type is supported
  return navigator.mimeTypes[mimeType] !== undefined;
}

// Check PDF support
if (supportsType('application/pdf')) {
  console.log('PDF plugin available');
} else {
  console.log('No PDF plugin - provide alternative');
}

// Check Flash support (deprecated)
if (supportsType('application/x-shockwave-flash')) {
  console.log('Flash plugin available (deprecated)');
}
</script>

Dynamic Embed Creation

<button onclick="loadPDF()">Load PDF</button>
<div id="pdf-container"></div>

<script>
function loadPDF() {
  const container = document.getElementById('pdf-container');

  // Create embed element
  const embed = document.createElement('embed');
  embed.src = 'document.pdf';
  embed.type = 'application/pdf';
  embed.width = '600';
  embed.height = '400';
  embed.title = 'Dynamically loaded PDF';

  // Add to page
  container.innerHTML = '';
  container.appendChild(embed);
}
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<button onclick="loadPDF()">Load PDF</button>
<div id="pdf-container"></div>

<script>
function loadPDF() {
  const container = document.getElementById('pdf-container');

  // Create embed element
  const embed = document.createElement('embed');
  embed.src = 'document.pdf';
  embed.type = 'application/pdf';
  embed.width = '600';
  embed.height = '400';
  embed.title = 'Dynamically loaded PDF';

  // Add to page
  container.innerHTML = '';
  container.appendChild(embed);
}
</script>

Fallback Detection

<div id="embed-wrapper">
<embed
  id="pdf-embed"
  src="document.pdf"
  type="application/pdf"
  width="600"
  height="400"
  title="PDF Document">
</div>

<script>
const embed = document.getElementById('pdf-embed');
const wrapper = document.getElementById('embed-wrapper');

// Check if embed loaded successfully
setTimeout(() => {
  if (!embed.offsetHeight || embed.offsetHeight === 0) {
    // Embed failed to load - provide alternative
    wrapper.innerHTML = '<div class="fallback">' +
      '<p>Unable to display PDF.</p>' +
      '<a href="' + embed.src + '" download>Download PDF instead</a>' +
      '</div>';
  }
}, 1000);
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<div id="embed-wrapper">
<embed
  id="pdf-embed"
  src="document.pdf"
  type="application/pdf"
  width="600"
  height="400"
  title="PDF Document">
</div>

<script>
const embed = document.getElementById('pdf-embed');
const wrapper = document.getElementById('embed-wrapper');

// Check if embed loaded successfully
setTimeout(() => {
  if (!embed.offsetHeight || embed.offsetHeight === 0) {
    // Embed failed to load - provide alternative
    wrapper.innerHTML = '<div class="fallback">' +
      '<p>Unable to display PDF.</p>' +
      '<a href="' + embed.src + '" download>Download PDF instead</a>' +
      '</div>';
  }
}, 1000);
</script>

Security Considerations

Plugin Vulnerabilities

Security Best Practices:

Never use Flash or other deprecated plugins
Prefer native HTML5 elements (<video>, <audio>, <img>)
Use <iframe> with sandbox for external content
Validate file types on the server side
Implement Content Security Policy to restrict embed sources

Content Security Policy

<!-- Restrict embed sources with CSP -->
<meta http-equiv="Content-Security-Policy"
    content="object-src 'self' https://trusted-cdn.com;">

<!-- Only allow specific file types -->
<embed
src="https://trusted-cdn.com/document.pdf"
type="application/pdf"
width="600"
height="400"
title="Trusted PDF Document">

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- Restrict embed sources with CSP -->
<meta http-equiv="Content-Security-Policy"
    content="object-src 'self' https://trusted-cdn.com;">

<!-- Only allow specific file types -->
<embed
src="https://trusted-cdn.com/document.pdf"
type="application/pdf"
width="600"
height="400"
title="Trusted PDF Document">

MIME Type Validation

Always specify the correct MIME type to prevent content type confusion attacks:

Secure
Insecure

<embed
  src="document.pdf"
  type="application/pdf"
  width="600"
  height="400">

<embed
  src="image.svg"
  type="image/svg+xml"
  width="200"
  height="100">

<!-- No type specified - browser guesses -->
<embed
  src="unknown-file.bin"
  width="600"
  height="400">

Browser Support

Feature	Chrome	Firefox	Safari	Edge
`<embed>` element	1+	1+	1+	12+
PDF embedding	1+	19+	5+	12+
SVG embedding	4+	4+	5+	12+
Flash plugin	❌ Removed 88+	❌ Removed 85+	❌ Removed 14+	❌ Removed 88+
Java plugin	❌ Removed 45+	❌ Removed 52+	❌ Removed 12+	❌ Removed
QuickTime plugin	❌ Deprecated	❌ Deprecated	❌ Deprecated	❌ Deprecated

Common MIME Types

MIME Type	Description	Modern Alternative
`application/pdf`	PDF documents	Use `<iframe>` or `<object>`
`image/svg+xml`	SVG vector images	Use `<img>` or inline SVG
`application/x-shockwave-flash`	Flash (deprecated)	Use HTML5/CSS/JavaScript
`video/mp4`	MP4 video	Use `<video>` element
`audio/mpeg`	MP3 audio	Use `<audio>` element
`video/quicktime`	QuickTime (deprecated)	Use `<video>` with MP4
`application/x-java-applet`	Java (removed)	Use modern web technologies

Migration Guide

From Flash to HTML5

Old (Flash)
New (HTML5)

<embed
  src="animation.swf"
  type="application/x-shockwave-flash"
  width="800"
  height="600"
  quality="high"
  wmode="transparent">

<!-- Use CSS animations, JavaScript, or Canvas -->
<canvas id="animation" width="800" height="600"></canvas>
<script>
  const canvas = document.getElementById('animation');
  const ctx = canvas.getContext('2d');
  // Draw animation with JavaScript
</script>

<!-- Or use video for animations -->
<video width="800" height="600" autoplay loop muted>
  <source src="animation.mp4" type="video/mp4">
  <source src="animation.webm" type="video/webm">
</video>

From Embed to Object

<embed>
<object> (Better)

<embed
  src="document.pdf"
  type="application/pdf"
  width="600"
  height="400">
<!-- No fallback possible -->

<object
  data="document.pdf"
  type="application/pdf"
  width="600"
  height="400">
  <p>Your browser doesn't support PDFs.
    <a href="document.pdf">Download the PDF</a>.</p>
</object>

</span> </p> <div class="body astro-v5tidmuc"><p>Better alternative for embedding external content. <a href="/elements/embedded/iframe/">Learn more →</a></p></div> </article> <article class="card sl-flex astro-v5tidmuc"> <p class="title sl-flex astro-v5tidmuc"> <svg aria-hidden="true" class="icon astro-v5tidmuc astro-c6vsoqas" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.333em;"><path d="M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3.06a1.3 1.3 0 0 0-.06-.27v-.09c-.05-.1-.11-.2-.19-.28l-6-6a1.07 1.07 0 0 0-.28-.19h-.09a.88.88 0 0 0-.33-.11H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8.94Zm-6-3.53L16.59 8H15a1 1 0 0 1-1-1V5.41ZM18 19a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z"/></svg> <span class="astro-v5tidmuc"><object></span> </p> <div class="body astro-v5tidmuc"><p>Embedded content with fallback support. <a href="/elements/embedded/object/">Learn more →</a></p></div> </article> <article class="card sl-flex astro-v5tidmuc"> <p class="title sl-flex astro-v5tidmuc"> <svg aria-hidden="true" class="icon astro-v5tidmuc astro-c6vsoqas" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.333em;"><path d="M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3.06a1.3 1.3 0 0 0-.06-.27v-.09c-.05-.1-.11-.2-.19-.28l-6-6a1.07 1.07 0 0 0-.28-.19h-.09a.88.88 0 0 0-.33-.11H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8.94Zm-6-3.53L16.59 8H15a1 1 0 0 1-1-1V5.41ZM18 19a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z"/></svg> <span class="astro-v5tidmuc"><video></span> </p> <div class="body astro-v5tidmuc"><p>Native video playback without plugins. <a href="/elements/media/video/">Learn more →</a></p></div> </article> <article class="card sl-flex astro-v5tidmuc"> <p class="title sl-flex astro-v5tidmuc"> <svg aria-hidden="true" class="icon astro-v5tidmuc astro-c6vsoqas" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.333em;"><path d="M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3.06a1.3 1.3 0 0 0-.06-.27v-.09c-.05-.1-.11-.2-.19-.28l-6-6a1.07 1.07 0 0 0-.28-.19h-.09a.88.88 0 0 0-.33-.11H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8.94Zm-6-3.53L16.59 8H15a1 1 0 0 1-1-1V5.41ZM18 19a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z"/></svg> <span class="astro-v5tidmuc"><audio></span> </p> <div class="body astro-v5tidmuc"><p>Native audio playback without plugins. <a href="/elements/media/audio/">Learn more →</a></p></div> </article> </div> <div class="sl-heading-wrapper level-h2"><h2 id="specifications">Specifications</h2><a class="sl-anchor-link" href="#specifications"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span><span class="sr-only">Section titled “Specifications”</span></a></div> <ul> <li><a href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-embed-element">WHATWG HTML Living Standard - embed</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed">MDN Web Docs - embed</a></li> </ul> </div> <footer class="sl-flex astro-3yyafb3n"> <div class="meta sl-flex astro-3yyafb3n"> </div> <div class="pagination-links print:hidden astro-u2l5gyhi" dir="ltr"> <a href="/elements/embedded/iframe/" rel="prev" class="astro-u2l5gyhi"> <svg aria-hidden="true" class="astro-u2l5gyhi astro-c6vsoqas" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17 11H9.41l3.3-3.29a1.004 1.004 0 1 0-1.42-1.42l-5 5a1 1 0 0 0-.21.33 1 1 0 0 0 0 .76 1 1 0 0 0 .21.33l5 5a1.002 1.002 0 0 0 1.639-.325 1 1 0 0 0-.219-1.095L9.41 13H17a1 1 0 0 0 0-2Z"/></svg> <span class="astro-u2l5gyhi"> Previous <br class="astro-u2l5gyhi"> <span class="link-title astro-u2l5gyhi"><iframe> - Inline Frame Element</span> </span> </a> <a href="/elements/embedded/object/" rel="next" class="astro-u2l5gyhi"> <svg aria-hidden="true" class="astro-u2l5gyhi astro-c6vsoqas" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17.92 11.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.003 1.003 0 1 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z"/></svg> <span class="astro-u2l5gyhi"> Next <br class="astro-u2l5gyhi"> <span class="link-title astro-u2l5gyhi"><object> - External Resource Element</span> </span> </a> </div> </footer> </div> </div> </main> </div> </div> </div> </div> </body></html>

<embed> - External Application Element

The <embed> Element

Quick Example

Syntax

Attributes

Essential Attributes

Plugin-Specific Attributes

Common Use Cases

Embedding PDF Documents

Embedding SVG Images

Embedding Video/Audio (Legacy)

Embedding QuickTime Movies (Legacy)

Modern Alternatives

Use Case Comparison

When to Use Each Element

Accessibility

Provide Alternative Content

Required: Title Attribute

ARIA Attributes

Keyboard Navigation

Styling

Basic Styling

Responsive Embedding

JavaScript Interaction

Detecting Plugin Support

Dynamic Embed Creation

Fallback Detection

Security Considerations

Plugin Vulnerabilities

Content Security Policy

MIME Type Validation

Browser Support

Common MIME Types

Migration Guide

From Flash to HTML5

From Embed to Object

Related Elements

The `<embed>` Element