HTML <embed> Tag

The HTML <embed> tag is used to embed external content like multimedia (videos, audio), plugins, or interactive applications into a web page. It is a self-closing tag and is commonly used to integrate content such as PDF files, Flash content, or other external resources.

Unlike other multimedia tags like <video> or <audio>, the <embed> tag does not provide built-in controls. Its behavior and appearance are defined by the type of embedded content and any attributes specified.

Basic Syntax of HTML <embed> Tag

The basic syntax of the <embed> tag is:

</>
Copy
<embed src="path-to-resource" type="media-type" width="width-value" height="height-value">

Here, the src attribute specifies the location of the embedded resource, while type, width, and height control the resource’s type and display size.

Attributes of HTML <embed> Tag

  • src: Specifies the URL of the resource to embed.
  • type: Specifies the MIME type of the embedded content (e.g., application/pdf, video/mp4).
  • width: Specifies the width of the embedded content in pixels or percentage.
  • height: Specifies the height of the embedded content in pixels or percentage.
  • Global Attributes: The <embed> tag supports all global attributes, such as id, class, style, and title.

Basic Example of HTML <embed> Tag

Here’s a basic example of embedding a PDF file into a web page:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Embed a PDF File</h2>
        <embed src="example.pdf" type="application/pdf" width="600" height="400">
    </body>
</html>

Explanation: In this example, a PDF file located at example.pdf is embedded into the page. It is displayed with a width of 600 pixels and a height of 400 pixels.

Embedding Videos Using the <embed> Tag

Here’s an example of embedding a video file using the <embed> tag:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Embed a Video</h2>
        <embed src="example.mp4" type="video/mp4" width="640" height="360">
    </body>
</html>

Explanation: The <embed> tag embeds the video file example.mp4 into the web page. The video is displayed with a width of 640 pixels and a height of 360 pixels.

Embedding External Content with the <embed> Tag

You can also embed content like interactive maps or other external resources. Here’s an example of embedding a Google Map:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Embed a Google Map</h2>
        <embed src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.8354345086215!2d-122.42184008468363!3d37.77492967975926!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80858064df856dcf%3A0x7952c2e4d73c1eb6!2sSan%20Francisco%2C%20CA!5e0!3m2!1sen!2sus!4v1632097601841!5m2!1sen!2sus" width="600" height="400">
    </body>
</html>

Explanation: The <embed> tag embeds an interactive Google Map into the web page. The src attribute specifies the map URL, and the width and height attributes control the display size.

Styling the <embed> Tag

The <embed> tag can be styled using CSS, although styling options are limited to attributes like dimensions and borders:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            embed {
                border: 2px solid #007BFF;
                border-radius: 10px;
                display: block;
                margin: 20px auto;
            }
        </style>
    </head>
    <body>
        <h2>Styled Embed Example</h2>
        <embed src="example.pdf" type="application/pdf" width="600" height="400">
    </body>
</html>

Result: The embedded PDF appears with a blue border, rounded corners, and is centered on the page.

Practical Applications of the <embed> Tag

  • Embedding Documents: Use <embed> to display PDF files directly on the page.
  • Multimedia Content: Integrate videos, audio, or Flash content.
  • Interactive Elements: Embed maps, games, or other interactive web resources.
  • Custom Applications: Display content from third-party sources, such as charts or tools.