In this article, we’ll see 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, picture, PDF, 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 to which the object element belongs 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.
- typemustmatch: 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.
<!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:
Using <object> </object> tag
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.
<!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
Using <embed> tag
Difference 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. |