HTML <embed> Tag

In this article, we’ll talk about HTML Tag embed. Wishing it would satisfy the requirements for learning.

The HTML <embed> tag is used to embed external content or media, such as images, audio, video, or other interactive content, directly into a web page.

Here is how you can use an embedded image:

Example: 

<!DOCTYPE html> <html> <body> <embed type="image/jpg" src="https://mrexamples.com/wp-content/uploads/2023/03/flower-scaled.jpg" width="350" height="275"> </embed></body> </html>

Here is an embedded HTML page:

Example: 

<!DOCTYPE html> <html> <body> <embed type="text/html" src="https://mrexamples.com/html/tags/tag-embed" width="550" height="250"> </embed></body> </html>

Here is an embedded video:

Example: 

<!DOCTYPE html> <html> <body> <embed type="video/webm" src="https://mrexamples.com/wp-content/uploads/2023/03/Tesla-Factory-Tour-with-Elon-Musk.mp4" width="500" height="280"> </embed></body> </html>

Here is an example of embedded video with controls:

Example: 

<!DOCTYPE html> <html> <body> <embed src='https://mrexamples.com/wp-content/uploads/2023/03/Tesla-Factory-Tour-with-Elon-Musk.mp4"' width="400" height="300" type="video/mp4" autoplay="true" loop="true" controls="true"> </embed></body> </html>


HTML <embed> Tag Advantages

The HTML <embed> tag offers several advantages, including:

  • The <embed> tag can be used to embed a wide range of external content or media directly into a web page, including images, audio, video, and interactive content such as Flash or Java applets.
  • By embedding external content directly into a web page, you can increase user engagement and interactivity. For example, embedding a video or interactive widget can make your content more engaging and dynamic.
  • The <embed> tag provides greater control over how external content is displayed on a web page. You can specify the size, position, and behavior of the embedded content using various attributes such as width, height, and autoplay.
  • Embedding content directly into a web page can also improve accessibility for users who may have difficulty accessing external content through other means, such as navigating to a separate website or downloading a file.
  • Embedding content directly into a web page can also improve page load times by eliminating the need for additional HTTP requests and reducing the overall size of the page.

Tag Embed Usage

Tag embed <embed> specifies a container for resources outside the site, for example, a web page, a photo, a media player, or a plug-in.

Caution

Almost all browsers have deprecated Java Applets and Plug-ins.

Browsers are no longer compatible with ActiveX controls.

Shockwave Flash functionality has been disabled in the latest browsers as well.

Recommendation

If you want to add a picture, use the <img> tag.

If you want to show HTML, use the <iframe> tag.

Using the <video> and <audio> tags when you want to embed video or audio.


Attributes

Attribute Value Overview
height pixels Determine how high the embedded content should be.
src URL Provide the address of the external file to embed
type media_type Indicates the media type of the embedded content.
width pixels Gives the width of the embedded content.

Browser Compatibility

Element
<embed> Yes Yes Yes Yes Yes

Attributes

Global

Embed tags <embed> work with HTML’s Global Attributes too.

Event

The embed tag <embed> handles the HTML Event Attributes.


CSS Default Settings

The <embed> element will often be presented with the following default values:

embed:focus {
outline: none;
}
Do subscribe to our Newsletter below in order to be in touch with the latest technical knowledge on this site.
We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon

Leave a Reply

Your email address will not be published. Required fields are marked *