<iframe>, <embed>, <object>?
Understanding <iframe>, <embed>, and <object>
HTML provides several elements for embedding external or non-HTML content into a page. The most common ones are <iframe>, <embed>, and <object>. While they may seem similar, each has a different purpose and typical use case.
- 1
<iframe>(Inline Frame): Used to embed another HTML document inside the current page (e.g., embedding YouTube videos, maps, or another website). It loads an entire web page within a rectangular frame. - 2
<embed>: A void element (no closing tag) used to embed external resources, usually multimedia like PDFs, audio, or Flash (historically). It’s simple but less flexible than<object>. - 3
<object>: A more general-purpose embedding element. It can embed images, videos, PDFs, or even another HTML page. Unlike<embed>, it supports fallback content inside its tags if the resource can’t be loaded.
In short: Use <iframe> to embed full web pages, <embed> for simple external resources, and <object> when you need embedding with fallback content.
Scenario Questions
0-2 years experience
- 1How would you embed a YouTube video on a page using an <iframe> and make sure it scales on mobile devices?
- 2If you need to show a PDF with a fallback message for browsers that don’t support <embed>, which tag would you choose and how would you structure the markup?
- 3What happens to the layout if you place an <object> inside a container that has overflow:hidden?
2-5 years experience
- 1We have a third‑party widget loaded via <embed> that sometimes blocks the main thread. How would you diagnose the issue and improve its performance?
- 2Our legacy site uses <object> to embed Flash content. We need to replace it with HTML5 while keeping a graceful fallback for older browsers. Walk me through your migration plan.
- 3Why might an <iframe> with a sandbox attribute still allow scripts to execute, and what additional attributes would you add to tighten security?
5-8 years experience
- 1Design a reusable component library for embedding videos, PDFs, and interactive widgets. How do you decide when to use <iframe>, <embed>, or <object>, and what patterns do you enforce for security and performance?
- 2At scale we serve thousands of iframes from many domains. Discuss the impact on CSP, cookie handling, click‑jacking protection, and how you’d mitigate performance overhead.
- 3We need progressive enhancement for embedded content with a no‑JavaScript fallback. How would you structure the markup and loading strategy to satisfy both cases?
8+ years experience
- 1Our intranet heavily uses <object> for legacy documents and we’re moving to a modern platform. Outline a migration strategy that minimizes disruption, handles security policies, and maintains backward compatibility across teams.
- 2You’re defining a cross‑team standard for third‑party content embedding. What governance model, security review process, and runtime monitoring would you establish, and how would you handle exceptions?
- 3Consider a global site that embeds content from dozens of external partners via iframes. How would you design a centralized service to manage CSP policies, user consent, and performance metrics across all teams?
Follow-up Questions
- What security risks does each tag introduce?
- How would you test that fallback content works across browsers?
- Can you give an example where you’d prefer <object> over <iframe>?