<iframe> vs <object> vs <embed>

by Ben Creasy

These tags are allowed in HTML5 to load external "plugin" content, but they are confusingly similar in functionality. Bottom line up-front, the <iframe> is actually more commonly used by vendors such as Youtube and Spotify (see below for details), but I've found the following pattern acceptable for SVG and PDFs. Read on for more on the subtle differences between them:

<div">
  <object data="[insert resource]" type="[insert MIME type]" style="height: 840px; width: 650px;">
    <embed src="[insert resource]" type="[insert MIME type]">
  <p>It appears you don't have a the proper plugin to load this in your browser. You can <a href="[insert resource link]">click here to access the resource.</a></p>
  </object>
</div>

The most popular answer to the Stackoverflow question Do I use <img>, <object>, or <embed> for SVG files? is straightforward: use <object> for interactive animations and <img> for images. In another popular question, EMBED vs. OBJECT, the answer says <embed> is old. But as a commenter points out, <embed> is valid HTML5!

SVG Essentials page 19 says the only official differences are that the <embed> tag swaps in src for data in specifying the source file, and that the <object> tag allows for fallback child content to display if the plugin does not exist. Apparently <embed> also has an unofficial but widely-implemented pluginspage attribute for linking to where to install the plugin. However, <object> also allows for child <param> tags to pass data ("FlashVars") into plugins, and allows for fallback text to accomplish the same thing as the unofficial pluginspage.

The approach above of using <embed> as a fallback is recommended because there's an off-chance <object> might not be supported. It's hard to say how likely — perhaps it is vanishingly small — but one prior post on this topic in 2002 had issues with <object>, and who knows what ancient browsers people might be running. MDN <embed> is the only one with noted browser compatibility issues which is ironic given that <embed> is of questionable use, and MDN recommended <iframe> as an alternative before I edited it while writing this article (yay wikis!). If we could be certain that all browsers support <object>, I would recommend only using <object> (or <iframe>).

These two tags are basically duplicative, and it is confusing to have them both. The actual discussion on the decision is probably out there in some mailing list thread, but the basic reason for both is probably that HTML5, which was largely formed by WHATWG as a splinter group from the W3C,[1] incorporates backwards compatibility as one of its founding principles, and embed is a popular historical tag. In the long-run, hopefully these two tags can be consolidated.

Practical considerations

As a web developer, you're likely to use these in two main cases:

  1. SVG animations.
  2. Everything else, ranging from embedded PDFs to flash games and video for browsers without <video> support.

Mainly I've observed that you generally want to set the size of the <object> and have the container scale down to fit that. Although <object> has sizing attributes directly on the tag, CSS is more flexible. For SVG, see Stack Overflow's Fit <svg> to the size of <object> container. With a PDF, I believe it happens automatically. With Flash and I'm not really sure.

What about iframes?

The last question in this story is where <iframe> fits in. As Youtube deprecated its flash-based video, it announced in January 2015 the transition from <object> to <iframe> embedding (see here for current details), which allows the proper technology to load. Spotify also uses <iframe> for embedding.

According to one 2014 discussion, "Object tags (with type="text/html") are basically iframes that also allow parameters". But this is wrong: a more informed article by the vendor vzaar states that "[u]nlike the iframe, the HTML (Object) embed cannot handle settings updates dynamically" and finds <object> to be too inflexible for their use case.

As this mess is sorted out over time, I plan to update this article.

  1. See HTML5: The Facts And The Myths (2010) for some history. ↩︎