Reading time: 15 minutes | Coding time: 10 minutes

We come across many websites that have video, audio along with the text content. Those websites/ webapps attract more users and are easier to interact with. In this article at OpenGenus, we will learn how to embed videos, applications and other external content in HTML document. To embed external content in HTML, embed tag is used.

In short, it is as follows:

<embed src="content path" type="content type" title="text on hover">

The embed tag embeds interactive content or external application (plugin) in the specified part of HTML document. It basically provides an integration point for an external (typically non-HTML) application or interactive content. It is a self-closing tag means it must not have an end tag.

Here are some of the contents/applications which we can be embedded in HTML document using <embed> tag :

• Video
• Audio
• Flash animations
• Java Applets
• Pdf files

The element-specific attributes of <embed> tag are as follows :

Understanding MIME type

A MIME type(Multipurpose Internet Mail Extensions) represents internet media. It is a standard that specifies format of document or media. Browsers use MIME type to determine how to process the URL. The value of type attribute of <embed> tag is actually a MIME type. It describes the format of resource provided by src attribute of <embed> tag.

The structure of MIME type consists of type and subtype. Both type and subtype are strings and when we combine them with '/' character we get a MIME type string.

type/subtype

The type represents general category of data and subtype represents exact format of data. Some examples of MIME types are image/png, video/webm, application/pdf.

Embedding image in HTML

We can embed images in HTML using <embed> tag. Various supported types are png, jpeg, bmp, jxs, etc

Example Code :

HTML

<div>
    <embed src="/content/images/2020/01/opengenus.png" type="image/png" title="OpenGenus image">
</div>

CSS

embed{
    width:50%;
    border:8px solid black;
    margin-left:22%;
}

Here we have embedded a png image from local directory.

Output :

Importance of title attribute

In the previous example we have used title attribute to specify about the content. It is used to label the content of embed element so that people using assistive technology can understand the type of content and what the embedded content is about.

Embedding video in HTML

We can embed videos in HTML using <embed> tag. Various supported types are mp4, webm, ogg, etc.

Example Code :

HTML

<div>
    <embed src="https://www.youtube.com/embed/NN39IpUAeA4" title="OpenGenus video" onclick="play()">
</div>

JS

    function play(){
        alert('Playing video!')
    }

Here we have embedded a youtube video. To get the embed link of youtube video just click on share, select embed and then copy the source string and use it in embed tag.

Output :

Creating and Referencing <embed> using JavaScript

We can dynamically embed external content in web applications by using JavaScript DOM(Document Object Model) manipulation. Below is an example to illustrate it :

Example Code :

HTML

<div id="content">
</div>

JS

//create an embed element using createElement function

var embed =  document.createElement("embed")

//set the attributes of embed element
embed.type="image/png"
embed.src="/local/img.png"

//we can now append it anywhere in our document
var div = document.getElementById("content")
div.appendChild(embed)

When the above code will execute, the <embed> element will be added inside of the div element with value of id equal to content.

Alternative of <embed> tag

The HTML <object> tag can also be used for embedding external content/applications. The only advantage of using <object> tag is that it contains alternative text.

Following Example illustrates the difference between <embed> and <object>.

<embed src="opengenus.swf">
<!--If the user does not have the plugin, then the user will be unable to use the resource.--->

<!--To pass the application a parameter "quality" with the value "high", an attribute can be specified-->

<embed src="opengenus.swf" quality="high">
<!--This would be equivalent to the following, when using an object element instead-->

<object data="opengenus.swf">
 <param name="quality" value="high">
<!--Any text between opening and closing object tag will be interpreted as alternative to application/media-->
 Flash is not supported
</object>

Browser Compatibility

<embed> tag is supported by following browsers :

• Google Chrome
• Safari
• Firefox
• Opera
• Internet Explorer

With this article at OpenGenus, we can now make web applications more interactive and functional by embedding video, audio, external application, etc. with the help of embed tag and we have also learned about an alternative of embed tag. Enjoy.