HTML — Plug-ins

Plug‑ins: What & Why

Plug‑ins let you add rich media or interactive content that the browser can’t handle by itself.
Think of a plug‑in as a tiny app that lives inside your page.
Common examples are PDF viewers, Flash animations, or a map from a third‑party service.
You’ll see three main HTML tags that load plug‑ins: <object>, <embed>, and <iframe>.
Each one has its own strengths and use‑cases, and we’ll explore them one by one.

---

<object> Element

The <object> tag is the most flexible plug‑in container.
It can load images, PDFs, videos, Java applets, or any file type the browser supports.

<object data="sample.pdf" type="application/pdf" width="600" height="400">
  <p>Your browser does not support PDFs. <a href="sample.pdf">Download the PDF</a>.</p>
</object>

What the browser displays

The PDF opens inside a 600 × 400 pixel box. If the PDF cannot be shown, the fallback text and link appear.

object supports several attributes:

Attribute	Meaning	Example
data	URL of the file	"sample.pdf"
type	MIME type of the file	"application/pdf"
width/height	Size of the plug‑in area	600 / 400
form	Form element that submits data to the plug‑in	id="myForm"
name	Name of the plug‑in instance	"myObject"

Good to know:
If the plug‑in fails, the content inside <object> is shown as a fallback.
This is how you provide a download link for PDFs on old browsers.

---

<embed> Element

<embed> is a simpler version of <object> that only accepts a source URL and MIME type.
It’s handy for quickly adding a media file like a Flash animation or a PDF.

<embed src="animation.swf" type="application/x-shockwave-flash" width="400" height="300">

What the browser displays

A Flash animation fills a 400 × 300 area. If the plugin is missing, nothing appears.

embed has fewer attributes, but the key ones are:

Attribute	Meaning	Example
src	URL of the plug‑in file	"animation.swf"
type	MIME type of the file	"application/x-shockwave-flash"
width/height	Size of the plug‑in area	400 / 300

Common mistake:
Forgetting to add the MIME type can make the plug‑in fail silently.
Always specify type to let the browser know how to handle the file.

---

<iframe> Element

<iframe> embeds an entire web page inside your page.
It’s not a plug‑in in the traditional sense, but it behaves like one because it loads external content.

<iframe src="https://example.com" width="800" height="500" title="External Site">
  <p>Your browser does not support iframes.</p>
</iframe>

What the browser displays

The page at example.com appears inside an 800 × 500 box. If iframes are blocked, the fallback text shows.

Key attributes for <iframe>:

Attribute	Meaning	Example
src	URL of the embedded page	"https://example.com"
width/height	Size of the iframe	800 / 500
title	Accessible name for the iframe	"External Site"
frameborder	Border thickness (0 or 1)	0
sandbox	Restricts capabilities of the iframe	"allow-scripts"

Good to know:
Use sandbox to lock down the iframe if you don’t want it to run scripts or submit forms.

---

Choosing the Right Plug‑in

Scenario	Preferred Tag	Why
Display a PDF or image that can be interacted with	<object>	Provides fallback content and full control
Quickly add a media file (video, Flash)	<embed>	Shorter syntax, works well for simple files
Show an entire website or map	<iframe>	Loads a full page within a frame

• Accessibility: Always add a title or descriptive fallback text.
• Security: Prefer sandbox on <iframe> if the source is untrusted.
• Performance: Avoid large plug‑ins unless necessary; they can slow down page load.

---

Common mistakes checklist

• Added MIME type (type) for <object> and <embed>.
• Provided fallback content inside <object>.
• Used sandbox on <iframe> when embedding third‑party sites.
• Specified width and height for all plug‑in elements.
• Checked that the file URL is correct and accessible.

---

Mini Practice

1. Create an <object> that displays a PDF named report.pdf at 700 × 500 pixels.
   Add fallback text that says “PDF not available.”
2. Use <embed> to embed a YouTube video file (e.g., video.mp4) at 640 × 360 pixels.
3. Add an <iframe> that loads https://openai.com. Set a width of 800 and a height of 600, and add a sandbox attribute that allows scripts but prevents form submissions.
4. Compare the three examples in a table: list the tag, the source attribute, and any special attributes you used.
5. Explain in one sentence why you might prefer <object> over <embed> for a PDF.