<object>: The External Object element #

::: section-content The <object> HTML element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin. :::

Try it #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

HTML Demo: <object> #

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-standard .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor} ::: :::

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} ::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: ::: :::

Attributes #

::: section-content This element includes the global attributes.

archive [Deprecated]{.visually-hidden}: A space-separated list of URIs for archives of resources for the object.
border [Deprecated]{.visually-hidden}: The width of a border around the control, in pixels.
classid [Deprecated]{.visually-hidden}: The URI of the object's implementation. It can be used together with, or in place of, the data attribute.
codebase [Deprecated]{.visually-hidden}: The base path used to resolve relative URIs specified by classid, data, or archive. If not specified, the default is the base URI of the current document.
codetype [Deprecated]{.visually-hidden}: The content type of the data specified by classid.
data: The address of the resource as a valid URL. At least one of data and type must be defined.
declare [Deprecated]{.visually-hidden}: The presence of this Boolean attribute makes this element a declaration only. The object must be instantiated by a subsequent <object> element. Repeat the <object> element completely each time the resource is reused.
form: The form element, if any, that the object element is associated with (its form owner). The value of the attribute must be an ID of a <form> element in the same document.
height: The height of the displayed resource, in CSS pixels{target="_blank"}. — (Absolute values only. NO percentages{target="_blank"})
name: The name of valid browsing context (HTML5), or the name of the control (HTML 4).
standby [Deprecated]{.visually-hidden}: A message that the browser can show while loading the object's implementation and data.
type: The content type of the resource specified by data. At least one of data and type must be defined.
usemap: A hash-name reference to a <map> element; that is a '#' followed by the value of a name of a map element.
width: The width of the display resource, in CSS pixels{target="_blank"}. — (Absolute values only. NO percentages{target="_blank"}) :::

Examples #

Embed a video #

::: section-content

HTML #

::: code-example [html]{.language-name}

<object
  type="video/mp4"
  data="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
  width="600"
  height="140">
  <img src="path/image.jpg" alt="useful image description" />
</object>

:::

Result #

::: {#sect1 .code-example} ::: iframe ::: :::

If the video in the example fails to load, the user will be provided with an image as fallback content. The <img> tag is used to display an image. We include the src attribute set to the path to the image we want to embed. We also include the alt attribute, which provides the image with an accessible name. If the image also fails to load, the content of the alt attribute will be displayed. :::

Technical summary #

::: section-content

Content categories	Flow content; phrasing content; embedded content, palpable content; if the element has a `usemap` attribute, interactive content; listed, submittable form-associated element.
Permitted content	zero or more `<param>` elements, then transparent.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts embedded content.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	`application`, `document`, `img`
DOM interface	`HTMLObjectElement`

:::

Specifications #

::: _table #

Specification #

HTML Standard
[# the-object-element]{.small}

:::

Browser compatibility #

::: _table Desktop Mobile

           Chrome    Edge   Firefox   Internet Explorer   Opera   Safari   WebView Android   Chrome Android   Firefox for Android   Opera Android   Safari on IOS   Samsung Internet

object 1 12 1 Yes 15 3 4.4 18 4 14 2 1.0 archive 1 12 1 Yes 15 3 4.4 18 4 14 2 1.0 border 1 12 1 Yes 15 3 4.4 18 4 14 2 1.0 classid Yes 12 1 Yes Yes Yes Yes Yes 4 Yes Yes Yes codebase 1 12 1 Yes 15 3 4.4 18 4 14 2 1.0 codetype 1 12 1 Yes 15 3 4.4 18 4 14 2 1.0 data 1 12 1 Yes 15 3 4.4 18 4 14 2 1.0 declare 1 12 1 Yes 15 3 4.4 18 4 14 2 1.0 form 1 12 1 Yes 15 3 4.4 18 4 14 2 1.0 height 1 12 1 Yes 15 3 4.4 18 4 14 2 1.0 name 1 12 1 Yes 15 3 4.4 18 4 14 2 1.0 standby 1 12 1 Yes 15 3 4.4 18 4 14 2 1.0 tabindex 1 12 1 Yes 15 3.1 4.4 18 4 14 2 1.0 type 1 12 1 Yes 15 3 4.4 18 4 14 2 1.0 usemap 1 12 1 Yes 15 3 4.4 18 4 14 2 1.0 width 1 12 1 Yes 15 3 4.4 18 4 14 2 1.0 :::