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

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.

Difference between <object> and <embed> Tags

saurabhkumarsharma05

Improve

Article Tags :

Difference between <object> and <embed> Tags

Similar Reads

Thank You!

What kind of Experience do you want to share?