HTML Plugins Using <object> and <embed>

HTML allows you to embed external content such as PDFs, Flash files (deprecated), or media players using the <object> and <embed> tags. These are commonly used for integrating multimedia or plugin-based content.

<object> Tag

The <object> tag is used to embed multimedia like videos, audio, PDFs, or even other webpages.

<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> instead.</p>
</object>

Common Attributes:

  • data: The file or resource URL
  • type: The MIME type of the content (e.g., application/pdf, video/mp4)
  • width and height: Dimensions of the embedded content
  • name: Specifies a name for the object
  • form: Associates the object with a form

<embed> Tag

The <embed> tag is a simpler alternative to <object>, often used to embed media such as audio, video, or Flash (now deprecated).

<embed 
  src="presentation.swf" 
  type="application/x-shockwave-flash"
  width="800" 
  height="600">
<!-- Note: Flash is deprecated and no longer supported -->

Common Attributes:

  • src: File path or URL of the resource
  • type: MIME type of the embedded content
  • width and height: Dimensions of the embedded content
  • pluginspage: Specifies where to get the plugin (for older browsers)

Key Differences

Feature <object> <embed>
Flexibility More versatile (can include fallback content) Simpler but less flexible
HTML5 Usage Recommended for embedding external files Older approach, still supported
Fallback Support Supports nested fallback content No fallback support
Modern Alternatives Can be used with PDFs when needed Largely replaced by <video> and <audio>

Modern Alternatives

<!-- For videos -->
<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser doesn't support HTML5 video.
</video>

<!-- For audio -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser doesn't support HTML5 audio.
</audio>

<!-- For PDFs (modern approach) -->
<iframe src="document.pdf" width="100%" height="500px">
  <p>Your browser doesn't support iframes. <a href="document.pdf">Download the PDF</a></p>
</iframe>

Best Practices

  • Use modern alternatives like <video>, <audio>, and <iframe> whenever possible
  • For PDFs, prefer <iframe> over <object> for better compatibility
  • Always specify MIME types for better browser compatibility
  • Avoid Flash content as it is deprecated and no longer supported
  • Provide fallback content for users without plugin support
  • Consider accessibility - ensure content is available to all users
  • For web pages, use <iframe> instead of <object>
  • Test thoroughly across different browsers and devices

When to Use <object> Today

While largely replaced by modern elements, <object> can still be useful for:

  • Embedding PDFs when more control is needed than <iframe> provides
  • Legacy systems that require specific plugins
  • Cases where you need nested fallback content
  • Embedding Java applets (though these are also largely deprecated)

Security Considerations

  • Be cautious when embedding content from untrusted sources
  • Plugins can pose security risks - prefer native HTML5 solutions
  • Many browsers have disabled NPAPI plugin support (including Flash, Java, etc.)
  • Consider content security policies when using embedded content