Difference between <object> and <embed> Tags
Last Updated :
25 Jul, 2024
This article shows the difference between the <object> and <embed> tags. Both <embed> and <object> tags are used to embed multimedia content like audio, video, and interactive media into web pages.
The HTML <object> element includes multimedia assets like video, audio, pictures, PDFs, or another page on your website. The HTML <param> element is also used in combination with the <object> tag to give parameters to a plugin that has been included using the <object> tag.
<object> tag attributes:
- data: Specifies the URL of the resource that the object will utilize.
- form: The form ID. This article shows that the object element is specified.
- height: specifies the object's height
- name: specifies the object's name.
- type: provides information about the data media type supplied in the data property.
- type must match: If the type attribute matches the actual content type of the resources supplied on the data attribute, it signals that the resource should be embedded.
- width: specifies the object's width
Syntax:
<object attributes>
Example 1: In this example, We are using the <object> tag to display the video. we set the display property to block and centered the video by using margin: 0 auto. We also added some borders around the video and some box shadows to the bottom. We use CSS to hide the video player's default media controls in Safari and other WebKit-based browsers.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
object {
display: block;
width: 640;
height: 360;
max-width: 800px;
margin: 0 auto;
border: 3px solid crimson;
box-shadow: 0px 0px 10px #6f6f6f;
border-radius: 8px;
}
object::-webkit-media-controls {
display: none;
}
object::-webkit-media-controls-enclosure {
display: none !important;
}
object::-webkit-media-controls-panel {
display: none !important;
}
object::-webkit-media-controls-play-button {
display: none !important;
}
</style>
</head>
<body>
<h1 style="color: green; margin-left: 5rem;">
GeeksforGeeks is Loading
</h1>
<object width="640" height="360"
data="video.mp4" type="video/mp4">
<param name="autoplay" value="true">
<param name="loop" value="true">
<param name="controls" value="true">
</object>
</body>
</html>
Output:
The <embed> tag is used to contain external programs, multimedia, and interactive material that the browser does not recognize. External plug-ins or special programs must be attached to be displayed properly. The file type, <embed> tag attributes, and browser plugins all affect how embedded material is shown.
<embed> tag attributes:
- height: The attribute value in pixels is stored in this attribute. It specifies the embedded content's height.
- src: Its purpose is to store the URL. It specifies the web address of the embedded content.
- width: The width is specified in pixels. It specifies the width of the embedded material.
- type: It specifies the embedded content's file types.
Syntax:
<embed attributes>
Example 2: This example same as the previous example but the difference is that in the previous example, we use <object> tag but in this example, we are using <embed> tag.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
embed {
display: block;
width: 640;
height: 360;
max-width: 800px;
margin: 0 auto;
border: 3px solid crimson;
box-shadow: 0px 0px 10px #6f6f6f;
border-radius: 8px;
}
embed::-webkit-media-controls {
display: none;
}
embed::-webkit-media-controls-enclosure {
display: none !important;
}
embed::-webkit-media-controls-panel {
display: none !important;
}
embed::-webkit-media-controls-play-button {
display: none !important;
}
</style>
</head>
<body>
<embed src="video.mp4" type="video/mp4"
width="640" height="360"
autoplay loop controls>
</body>
</html>
Output: It can
Embed OutputDifference Between <object> and <embed> tags:
| Feature | <object> | <embed> |
| Syntax | <object>...</object> | <embed src="..." /> |
| Required Attributes | data or class id | src |
| Optional Attributes | width, height, type, name, tabindex, and more. | width, height, type, class, id, name, and more. |
| Browser Support | Supported by most modern web browsers, including IE, Edge, Chrome, Firefox, Safari, and Opera. | Supported by most modern web browsers, including IE, Edge, Chrome, Firefox, Safari, and Opera. |
| Accessibility | supports the use of "param" elements to specify fallback content for users with impairments or non-supported browsers. | There is no standardized mechanism for fallback content. |
| Plugin Support | It is possible to utilize it to load plugins such as Java applets and ActiveX controllers. | It can also load plugins, but plugin functionality is being phased out in many browsers. |
Similar Reads
HTML Tutorial HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. It tells the web browser how to display text, links, images, and other forms of multimedia on a webpage. HTML sets up the basic structure of a website, and then CSS and JavaScript
11 min read
HTML Interview Questions and Answers HTML (HyperText Markup Language) is the foundational language for creating web pages and web applications. Whether you're a fresher or an experienced professional, preparing for an HTML interview requires a solid understanding of both basic and advanced concepts. Below is a curated list of 50+ HTML
14 min read
Top 10 Projects For Beginners To Practice HTML and CSS Skills Learning to code is an exciting journey, especially when stepping into the world of programming with HTML and CSS—the foundation of every website you see today. For most beginners, these two building blocks are the perfect starting point to explore the creative side of web development, designing vis
8 min read
HTML Introduction HTML stands for Hyper Text Markup Language, which is the core language used to structure content on the web. It organizes text, images, links, and media using tags and elements that browsers can interpret. As of 2025, over 95% of websites rely on HTML alongside CSS and JavaScript, making it a fundam
6 min read
HTML Tags - A to Z List HTML Tags are fundamental elements used to structure and format content on web pages. They provide instructions to web browsers on how to render text, images, links, and other media.HTML tags are enclosed in angle brackets < > and usually come in pairs: an opening tag and a closing tag. The cl
15+ min read
HTML DOCTYPE Declaration HTML DOCTYPE (Document Type Declaration) is an instruction that appears at the beginning of an HTML document, before the <html> tag.Its primary role is to tell the web browser which version of HTML the page is written in, ensuring that the browser renders the content correctly. It is not an HT
4 min read
30+ Web Development Projects with Source Code [2025] Web development is one of the most in-demand career paths in the IT industry, experiencing consistent growth of around 20–25% annually. Whether you're a student starting out or an experienced professional looking to switch or advance your career, it's essential to go beyond theory and demonstrate yo
4 min read
Frontend Developer Interview Questions and Answers Frontend development is an important part of web applications, and it is used to build dynamic and user-friendly web applications with an interactive user interface (UI). Many companies are hiring skilled Frontend developers with expertise in HTML, CSS, JavaScript, and modern frameworks and librarie
15+ min read
HTML Forms HTML forms, defined using the <form> Tags are essential for collecting user input on web pages. They incorporate a variety of interactive controls such as text fields, numeric inputs, email fields, password fields, checkboxes, radio buttons, and submit buttons. Over 85% of websites rely on for
5 min read
HTML Tables HTML (HyperText Markup Language) is the standard markup language used to create and structure web pages. It defines the layout of a webpage using elements and tags, allowing for the display of text, images, links, and multimedia content. As the foundation of nearly all websites, HTML is used in over
10 min read