HTML provides the <embed> and <object> elements to include external content in web pages, such as PDFs, multimedia files, or interactive applications. These elements allow you to integrate non-HTML content seamlessly, giving your website rich functionality beyond standard images, audio, or video.

HTML <embed> Element

The <embed> element is used to embed external content directly, such as PDFs, videos, or Flash (legacy). It is a self-closing tag.

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

Explanation:

• src: Path or URL of the external file.
• type: MIME type of the file (e.g., application/pdf, video/mp4).
• width & height: Size of the embedded content.

<embed src="https://pdfobject.com/pdf/sample.pdf" type="application/pdf" width="600" height="800">

This displays a PDF file directly inside the web page.

HTML <embed> Attributes

HTML <object> Element

The <object> element is a more versatile container for external resources, such as PDFs, multimedia, or HTML pages.

<object data="example.pdf" type="application/pdf" width="600" height="400">
  Your browser does not support embedded objects.
</object>

Explanation:

• data: Path or URL of the external file.
• type: MIME type of the file.
• width & height: Dimensions of the embedded content.
• Inner content: Fallback text or HTML displayed if the browser cannot load the object.

<object data="https://pdfobject.com/pdf/sample.pdf" type="application/pdf" width="600" height="800">
  <p>It appears your browser does not support PDF viewing. <a href="document.pdf">Download the PDF</a>.</p>
</object>

HTML <object> Attributes

Differences Between <embed> and <object>

⚠️ Tip: Use <object> if you want fallback content or additional HTML inside the element. Use <embed> for simple embedding.

Removing PDF toolbar/sidebar using parameters in URL

<h2>Removing with HTML Embed</h2>
<embed src="https://pdfobject.com/pdf/sample.pdf#toolbar=0&navpanes=0&scrollbar=0" 
       type="application/pdf" 
       width="600" 
       height="500">
<h2>Removing with HTML Object</h2>
<object data="https://pdfobject.com/pdf/sample.pdf#toolbar=0&navpanes=0&scrollbar=0" 
        type="application/pdf" 
        width="600" 
        height="500">
  <p>Your browser cannot display this PDF. <a href="sample.pdf">Download PDF</a></p>
</object>

Explanation:

• You can control the display of PDF toolbars, navigation panels, and scrollbars by appending parameters in the URL (#toolbar=0&navpanes=0&scrollbar=0).
• The <object> fallback allows users to download the file if it cannot be displayed.

⚠️ Note: Some PDF viewers ignore certain parameters depending on the browser or plugin.

Advantages

• Embed multimedia, PDFs, or interactive content directly.
• <object> allows fallback HTML content.
• Both elements work across modern browsers for supported formats.
• Improves user experience without redirecting to external files.

Tips for Embedded Media

1. Always specify width and height for proper layout.
2. Test PDF parameters across browsers — some browsers ignore them.
3. Use fallback content in <object> to maintain accessibility.
4. For audio/video embedding, use autoplay, loop, muted, and controls attributes as needed.
5. Combine CSS with <embed> or <object> to style borders or hide scrollbars.

Conclusion

The <embed> and <object> elements allow developers to include rich external content, such as PDFs, multimedia, and interactive applications, directly in web pages.
While <embed> is simpler, <object> is more versatile, especially when fallback content or HTML is needed.
Use these elements to enhance interactivity and functionality on your website.