HTML Images and Media
HTML Embed & Object
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.
Syntax
html
<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.
HTML Embed Example
html
<embed src="https://ik.imagekit.io/html5andcss3/lesson-samples/sample.pdf" type="application/pdf" width="600" height="800">This displays a PDF file directly inside the web page.
HTML <embed> Attributes
| Attribute | Description |
|---|---|
| src | URL or path of the external file to embed. |
| type | MIME type of the embedded content (e.g., application/pdf, video/mp4). |
| width | Width of the embedded content (in pixels or %). |
| height | Height of the embedded content (in pixels or %). |
| autoplay | Automatically starts playing audio or video (if supported). |
| loop | Loops the media (video/audio). |
| hidden | Hides the embedded content from display. |
| style | CSS styling (can be used to hide sidebars, borders, or adjust appearance). |
HTML <object> Element
The <object> element is a more versatile container for external resources, such as PDFs, multimedia, or HTML pages.
HTML Object Syntax
html
<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.
HTML Object Example
html
<object data="https://ik.imagekit.io/html5andcss3/lesson-samples/sample.pdf" type="application/pdf" width="600" height="800">
<p>It appears your browser does not support PDF viewing. <a href="https://ik.imagekit.io/html5andcss3/lesson-samples/sample.pdf">Download the PDF</a>.</p>
</object>HTML <object> Attributes
| Attribute | Description |
|---|---|
| data | URL or path of the external file. |
| type | MIME type of the content. |
| width | Width of the embedded object. |
| height | Height of the embedded object. |
| form | Associates the object with a form. |
| name | Assigns a name to the object for scripting purposes. |
Differences Between <embed> and <object>
| Feature | <embed> | <object> |
|---|---|---|
| Fallback content | None | Supported |
| HTML compatibility | HTML5 | HTML4 & HTML5 |
| Flexibility | Less flexible | More flexible |
| Multimedia support | Yes | Yes |
| Use for PDFs | Yes | Yes |
⚠️ 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
PDF Toolbar Removing Example with <embed>
html
<embed src="https://ik.imagekit.io/html5andcss3/lesson-samples/sample.pdf#toolbar=0&navpanes=0&scrollbar=0" type="application/pdf" width="600" height="500">PDF Toolbar Removing with <object>
PDF Toolbar Removing Example with <object>
html
<object data="https://ik.imagekit.io/html5andcss3/lesson-samples/sample.pdf#toolbar=0&navpanes=0&scrollbar=0" type="application/pdf" width="600" height="500">
<p>Your browser cannot display this PDF. <a href="https://ik.imagekit.io/html5andcss3/lesson-samples/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
- Always specify
widthandheightto reduce layout shifts. - Test PDF URL parameters across browsers because built-in PDF viewers may ignore them.
- Use fallback content inside
<object>so users can access or download the resource. - Use
<audio>and<video>instead of<embed>or<object>for media playback. - Do not add obsolete
<param>children to<object>.
Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
Conclusion
The <embed> and <object> elements can display supported external resources such as PDFs.<object> is useful when fallback HTML is required. Prefer dedicated HTML elements for audio, video, images, and webpages.