Difference between <object> and <embed> Tags
Last Updated :
24 Apr, 2023
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.
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:
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.
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
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. |
Share your thoughts in the comments
Please Login to comment...