Computer scienceFrontendHTMLMedia files

Tag Embed

Provided by: JetBrains Academy
3 minutes read

HTML is the fundamental building block of any website, and it provides many solid tools for developers to create visually pleasing and interactive websites. One such feature of HTML or the tag present in HTML is the embed tag, allowing developers to embed content such as videos, images, maps, and other multimedia features into their web pages.

Embed tag

The <embed> tag is a self-closing tag used to embed external content into an HTML document. It is a versatile tag and can embed various media types, including videos, audio files, PDF documents, and more. In this topic, you'll learn different uses of the embed tag with examples of how it can be used to create rich and engaging web pages. But first, let's look at the syntax of the embed tag:

<embed src="URL" type="MIME Type" title="title_name">

The src attribute specifies the URL of the external content you want to embed. The type attribute specifies the MIME type of the content. For example, if you want to embed a video, the type attribute would be set to "video/mp4" for an MP4 video file, and if you want to embed an audio file, the type attribute would be set to "audio/mp3" for an MP3 audio file. The title attribute is used to improve the accessibility of the web pages. Now, let's take a simple example to understand the embed tag.

<body>
  <embed
    src="frame.jpg"
    type="image/jpg"
    title="A random free image from unsplash"
    height="250"
    width="250" />
</body>

Here's the output of the above snippet:

Here, the <embed> tag denotes a container for the specified media contents containing images, videos, and audio. src means the source or the location of the file. type denotes the kind of media present in the embed tag. height and width assign the height and the width of the content. title defines the type of media in the embed tag in the form of text.

Most modern browsers have removed and deprecated support for browser plugins, so completely depending on the embed <embed> tag is generally not wise if you want your site to work on an average user's browser.

Applications

The embed tag can be used for multiple purposes. It's mainly used to present media content or browser plugins.

  • Embedding a video

The embed tag is commonly used to embed videos into web pages. Here is an example of how you can use it to embed a video:

<body>
  <embed
    src="flow.mp4"
    type="video/mp4"
    title="A random free video from pixabay"
    height="250"
    width="250"/>
</body>

Here's the output:

In this example, a free video from the internet is downloaded to a local system and embedded into our web page using the embed tag. We set the src attribute to the location of the video and the type attribute to "video/mp4".

The <img> tag is preferred over the <embed> tag in the latest version of HTML5 for displaying images or videos on the website due to the deprecation of the <embed> tag.
  • Embedding an audio

You can also use the embed tag to embed audio files into web pages. Here is an example:

<body>
  <embed
    src="audiofile.mp3"
    type="audio/mp3"
    title="An audio file embedded on web page" />
</body>

The output of the above code snippet will contain an audio file on the web page.

The <audio> tag is preferred over the embed tag in the latest version of HTML5 for playing audio on the website due to the deprecation of the <embed> tag.
  • Embedding a map

The embed tag can also be used to embed Google Maps into web pages. Here is an example:

<body>
  <embed
    src="https://www.google.com/maps/embed/v1/place?q=Australia&key=BACIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"
    type="text/html"
    title="A map embedded"
    width="600"
    height="450"/>
</body>

Here's the output:

You can use this tool to generate an address and embed the map on your website.

  • Embedding a pdf

Last but not least, the embed tag allows you to embed PDF files directly into your HTML documents. This tag enables users to view the PDF files on a webpage without downloading them or opening the PDF files separately. Let's see it in action.

<body>
  <embed
    src="https://www.africau.edu/images/default/sample.pdf"
    type="application/pdf"
    title="A pdf embedded on web page"
    width="600"
    height="450" />
</body>

Here's the output:

In this example, an embed tag is used to embed a PDF file with the src attribute set to the URL or the location of our PDF file, the type attribute set to "application/pdf", and the width and height attributes set to 600 and 450 pixels, respectively.

Since the embed tag has been deprecated, many plugins have become unavailable and the attributes for images, videos, audio, etc., have been created separately. Despite this, many browsers still support the embed tag as it has been used for a long time.

Conclusion

In this topic, you have learned that the <embed> tag is a helpful HTML element that allows website developers to embed various types of multimedia content such as videos, audio files, and interactive applications within web pages. However, developers should use the embed tag responsibly and consider such factors as file size, compatibility, and accessibility when incorporating multimedia content into web pages.

How did you like the theory?
Report a typo