HTML Tags
HTML <embed> Tag
The
<embed>tag in HTML is used to embed external content such as videos, audio, PDFs, or interactive media (like SVGs or Flash) directly into a webpage.
It is a self-closing tag and doesn’t require a closing tag. It serves as a generic container for external resources when specific tags (like<video>or<audio>) are not suitable.
Syntax
html
<embed src="filename" type="mime/type" width="600" height="400">Attributes
| Attribute | Description |
|---|---|
| src | Specifies the path (URL) of the external file to embed. |
| type | Defines the MIME type of the embedded content (e.g., video/mp4, application/pdf). |
| width | Sets the width of the embedded content (in pixels). |
| height | Sets the height of the embedded content (in pixels). |
Example
Embedding a PDF File
html
<embed src="https://ik.imagekit.io/html5andcss3/lesson-samples/sample.pdf" type="application/pdf" width="700" height="500">Embedding a Video File
Embedding a Video File
html
<embed src="https://ik.imagekit.io/html5andcss3/lesson-samples/sample_video.mp4" type="video/mp4" width="640" height="360">Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
The PDF file appears inline with scroll and zoom options inside the page.
The video plays directly inside the defined area if supported by the browser.
Notes
<embed>is a generic container for external content; use it when a specialized element (like<audio>,<video>, or<object>) isn’t suitable.- Many use-cases (video/audio) are better handled by
<video>/<audio>because those provide built-in controls and better accessibility. - For documents (PDF) consider
<iframe>or<object>as alternatives - browser UI and print/zoom support may differ. - Some embedded content types may require browser plugins or specific MIME handlers; these cases can produce inconsistent behavior across browsers.
- Security: avoid embedding untrusted content. Use correct
typeand host files over HTTPS to prevent mixed-content issues. - Accessibility: provide fallback content and ensure embedded content is reachable via keyboard/screen readers when applicable.
- Sizing & responsiveness: use CSS (or wrapper elements) to make embedded content responsive; fixed
width/heightcan break layouts on small screens.
Conclusion
The <embed> tag is a versatile tool for embedding various types of media into a webpage.
While it provides a simple way to display external content like PDFs or videos, it lacks advanced playback controls - so for audio or video content, dedicated tags like <video> and <audio> are generally preferred.