HTML embed Tag: How to Embed External Media in Web Pages

The HTML embed tag is used to display media content, such as videos or audio. It can also display PDFs from external sources. It places the media directly inside your webpage. The browser runs the content inline while the user stays on the page.

Understand the <embed> Tag in HTML

The <embed> tag inserts external media into your web page. The browser renders the media inline. It can handle formats such as:

• PDF
• MP3
• MP4
• SVG

This tag is a void element. It does not have a close tag.

Here are the use cases:

• Display PDFs in the browser
• Embed MP3 files for direct playback
• Show Flash content in older apps
• Render SVG animations
• Include audio or video streams

Here is the basic tag:

<embed src="file-path" type="media-type">

The src tells the browser where the file is while the type tells it what the file format is.

Here are the required and optional attributes:

For example:

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

This line embeds a PDF named document.pdf. It renders a viewer that is 600px wide and 400px high. The browser handles the rest.

So, how to embed Flash (for legacy use)?

Flash is obsolete. Modern browsers block it. Here is how the syntax looked before:

<embed src="file.swf" type="application/x-shockwave-flash" width="500" height="300">

This tag once rendered Flash animations. But now it uses HTML5 video or JavaScript libraries instead.

The Common Use Attributes in the HTML <embed> Tag

• src points to the media file
• type tells the browser the file format
• width and height control display size
• title adds a tooltip or helps accessibility
• autostart works with some formats like audio
• loop repeats media content automatically
• pluginspage is used for Flash to load plugins (obsolete)

PDF Document Viewer

<embed src="report.pdf" type="application/pdf" width="700" height="500" title="View Report">

This embeds report.pdf in the page. The title gives screen readers helpful text. The file opens for reading without a download with a viewer size of 700×500 pixels.

MP3 Audio Player

<embed src="audio.mp3" type="audio/mpeg" width="300" height="40" autostart="true" loop="true">

This embeds an MP3 player. The autostart plays the file when the page loads.
The loop repeats the track forever. The width and height fit a small control bar.

Differences Between <embed>, and <object>

Here is a table that shows you the key differences:

When to Use <embed> Instead of Other Tags:

• Use <embed> to show standalone media files. It works for PDFs and legacy Flash.
• Use <object> if you need fallback content.
• Use <iframe> for interactive websites or tools.

Examples of <embed> Tag in HTML

Embed a Local PDF File:

<embed src="guide.pdf" type="application/pdf" width="800" height="600">

This shows guide.pdf in an 800×600 viewer. Users view or scroll the document in place. There is no need to download the file.

Embed an Audio File That Autoplays:

<embed src="song.mp3" type="audio/mpeg" autostart="true" width="300" height="50">

This loads an MP3 and starts playback. The media area is too small to fit basic controls. You can loop the audio if needed.

Embed a Flash Game (Legacy):

<embed src="game.swf" type="application/x-shockwave-flash" width="640" height="480">

This runs a .swf game inside a 640×480 box. It only works in older browsers that still allow Flash.

Embed a Vector Animation:

<embed src="graphic.svg" type="image/svg+xml" width="500" height="400">

This loads a scalable vector image. The browser renders it in high resolution.
The file size stays small and scales well.

Wrapping Up

In this article, you learned how the <embed> tag works. You saw how to load media files into HTML. You also explored syntax and attributes.

Here is a quick recap:

• Use <embed> to insert external media
• Set src and type correctly
• Adjust width and height to fit the layout
• Use autoplay or loop for audio or video
• Prefer HTML5 options over Flash

FAQs

Similar Reads