TIL the difference between embed and iframe

POSTED ON: Apr 29, 2021

TAGS: html

In my presentation slides for BangBangCon 2021, I wanted to be able to interact directly with a website within the slides themselves.

My kneejerk reaction was to reach for <iframe>.

But then I remembered <embed>. And there's also a <object> tag as well!

What is the difference?

NOTE: Much of the research and differences comes from html4 and html5, stuff from nearly a DECADE ago. So all the concerns about one or the other is kind of moot. When in doubt, just go straight <iframe>.

MDN notes

`<iframe>`

The HTML Inline Frame element () represents a nested browsing context, embedding another HTML page into the current one. <pre class="language-html"><code class="language-html"><iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" title="iframe Example 1" width="400" height="300"> </iframe></code></pre> via <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe</a> <h3 id="lessembedgreater" tabindex="-1"><code><embed></code> <a class="direct-link" href="#lessembedgreater" aria-hidden="true">#</a></h3> The HTML <embed> element embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in. <pre class="language-html"><code class="language-html"><embed type="video/quicktime" src="movie.mov" width="640" height="480" title="Title of my video"></code></pre> via <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed</a> <h3 id="lessobjectgreater" tabindex="-1"><code><object></code> <a class="direct-link" href="#lessobjectgreater" aria-hidden="true">#</a></h3> <blockquote> The HTML <object> 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. </blockquote> <pre class="language-html"><code class="language-html"> <object data="movie.swf" type="application/x-shockwave-flash"></object>  <object data="movie.swf" type="application/x-shockwave-flash"> <param name="foo" value="bar"> </object></code></pre> via <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object</a> <h2 id="conclusion" tabindex="-1">Conclusion <a class="direct-link" href="#conclusion" aria-hidden="true">#</a></h2> Note - this is super rough research, but this is kind of the bulletpoints. <ul> <li>The <code><object></code> element is used to embed an object in an HTML document. It is commonly used to embed web page elements such as Flash and Java items that are handled by browser plugins.</li> <li>The <code><object></code> embed code is now considered to be deprecated. We would only recommend its use in situations where iframe embedding isn't possible. For all other uses, the iframe embed code will offer greater reliability and functionality.</li> <li>The <code><embed></code> attribute was originally used both for applications (like Flash) and also for media — movies and audio. You can now use HTML5’s new media elements, <code><audio></code> and <code><video></code>.</li> <li>With <code><embed></code> you can get the context of the child from the parent and vice versa. This means they you can use scripts in the parent to manipulate the child etc. That part is not possible with <code><object></code> or <code><iframe></code> where you would have to set up some other mechanism instead.</li> <li>The <code><iframe></code> creates an inline frame, which embeds an independent HTML document into the current document.</li> </ul> Overall - for my project, <code><iframe></code> is the best fit. And my use of <code><embed></code> is fine. <h2 id="embed-vs-iframe-vs-object-references:" tabindex="-1">Embed vs iframe vs Object References: <a class="direct-link" href="#embed-vs-iframe-vs-object-references:" aria-hidden="true">#</a></h2> <ul> <li> <a href="https://stackoverflow.com/questions/16660559/difference-between-iframe-embed-and-object-elements">https://stackoverflow.com/questions/16660559/difference-between-iframe-embed-and-object-elements</a> </li> <li> <a href="https://web.archive.org/web/20150614171416/https://vzaar.com/help/kb/features/what-are-the-differences-between-the-iframe-and-object-embed-codes">https://web.archive.org/web/20150614171416/https://vzaar.com/help/kb/features/what-are-the-differences-between-the-iframe-and-object-embed-codes</a> </li> <li> <a href="https://www.quora.com/What-is-the-difference-between-iframe-object-and-embed">https://www.quora.com/What-is-the-difference-between-iframe-object-and-embed</a> </li> </ul> <hr> <h3>Related TILs</h3> Tagged: <a href="/tags/html/" class="post-tag">html</a> <div class="box"> <a href="/posts/2023-03/2023-03-05-gmail-102kb-limit/" class="relatedLinks"> <div class="card"> TIL Gmail has a 102KB size-limit for HTML PLACEHOLDER <time class="postlist-date small italics" datetime="2023-03-05">Mar 05, 2023</time> </div> </a> <a href="/posts/2023-02/2023-02-17-error-correction-html/" class="relatedLinks"> <div class="card"> TIL how Error correction works in HTML You never get an 'Invalid Syntax' error on an HTML page. Browsers fix any invalid content and go on. <time class="postlist-date small italics" datetime="2023-02-17">Feb 17, 2023</time> </div> </a> <a href="/posts/2023-02/2023-02-15-doctype-html/" class="relatedLinks"> <div class="card"> TIL what DOCTYPE means tl;dr: DOCTYPE declaration in the first line of the HTML file, to instruct the browser to run the code in Standard mode. <time class="postlist-date small italics" datetime="2023-02-15">Feb 15, 2023</time> </div> </a> </div> <hr> <ul class="post-navigation"><li>Next: <a href="/posts/2021-04/2021-04-30-chocolatey-gui/">TIL the Chocolatey GUI</a>Installing software via the command line is a way of life. Btw this GUI is really nice too!</li> <li>Previous: <a href="/posts/2021-04/2021-04-28-mount-unmount/">TIL about Mounting/Unmounting without software in Windows 10</a>I used to download a virtual CD drive to mount isos. Apparently, it's built into Windows 10!</li> </ul> </main> <footer> So much to learn. So little time! © 2019-2023 Hey It's Rocky </footer> </body> </html>

TIL the difference between embed and iframe

MDN notes #

<iframe> #

MDN notes

`<iframe>`