<object>

<object> embeds a resource that may be treated as an image, a nested document, or another browser-handled type. Unlike embed, it can contain fallback content.

Resource and fallback

The embedded SVG is self-contained. If the resource cannot display, the child text supplies a description. A description outside the object remains available regardless of viewer behavior.

Observe object behaviorLink

HTML and CSS

HTML

<p>
  Resource description: a pale blue illustration containing the words “Embedded
  illustration.”
</p>
<object
  data="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22100%22%3E%3Crect%20width%3D%22240%22%20height%3D%22100%22%20fill%3D%22%23dbeafe%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2255%22%20font-size%3D%2220%22%3EEmbedded%20illustration%3C%2Ftext%3E%3C%2Fsvg%3E"
  type="image/svg+xml"
  width="240"
  height="100"
  aria-label="Embedded illustration"
>
  <p>Embedded illustration: a pale blue rectangle with that label.</p>
</object>

CSS

object {
  max-width: 100%;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

Attributes and content

data identifies the resource URL and type supplies its media type. Width and height set CSS-pixel dimensions. Object needs an end tag and accepts fallback flow content. Obsolete classid, codebase, and plug-in recipes should not be used for modern media.

Fallback may appear when the resource cannot be handled, but a viewer that loads and then fails does not guarantee that useful fallback appears. Provide important alternatives outside the object as well.

Inspect and choose

Open the copied document directly if the sandboxed preview blocks the viewer. Inspect whether the resource or its fallback appears, then test keyboard access and the resource’s own accessibility. A PDF viewer does not make an inaccessible PDF accessible.

Use img for an ordinary image, iframe for an HTML document, and native video/audio elements for their controls. Content Security Policy’s object-src can restrict these resources.

Sources and browser support

MDN: object describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.