-
Hajipur, Bihar, 844101
HTML Plug-ins
HTML plug-ins are used to display external content types that a browser cannot handle on its own. Before modern HTML5 elements like <video> and <audio>, websites used plug-ins to show videos, animations, PDF files and interactive elements. Even though plug-ins are less common today, it is still important to understand how they work because some older websites and specialized applications still depend on them.
In this chapter, you will learn what plug-ins are, how the <object> and <embed> tags work, how to display PDFs and other media, how parameters are passed and how fallback content helps when a browser does not support the file or plugin.
What are HTML plug-ins
A plug-in is an external application that the browser uses to handle special types of content. For example:
-
PDF readers
-
Flash players
-
Java applets
-
Map tools
-
Document viewers
-
Audio and video players (before HTML5)
Today, most of these are replaced by native HTML features, but PDFs and some specialized document formats still use plug-ins.
The <object> element
The <object> tag is used to embed files or external applications inside a page. It can display images, videos, PDFs and even other webpages depending on the file type and browser support.
Basic syntax:
<object data="file.pdf" width="600" height="400"></object>
Here, data is the file you want to load. The browser checks if it can handle the file. If not, it falls back to default text or an alternative tag.
Adding fallback content
Fallback content appears when the browser cannot load the object.
<object data="document.pdf" width="600" height="400">
The PDF could not be displayed. Please download it using the link below.
<a href="document.pdf">Download PDF</a>
</object>
This ensures that users still get access to the file even if plug-in support is missing.
The <embed> element
The <embed> tag is another way to add external content. It works similarly to <object> but does not support fallback content inside the tag.
Basic example:
<embed src="file.pdf" width="600" height="400">
<embed> is self-closing in HTML5 and commonly used for PDF embedding because it loads quickly.
Embedding PDFs on a webpage
PDFs are the most common use case today. You can embed a PDF using either <embed> or <object>.
Example using object:
<object data="notice.pdf" type="application/pdf" width="700" height="500">
Your browser cannot open PDFs. Click below to view.
<a href="notice.pdf">Download PDF</a>
</object>
Example using embed:
<embed src="notice.pdf" width="700" height="500" type="application/pdf">
This is useful for reports, forms, notices, study materials and brochures.
Embedding audio/video with object
Although HTML5 provides <audio> and <video>, you can still use <object> for older formats.
Example:
<object data="song.mp3" type="audio/mpeg" width="300" height="50">
Your browser cannot play this audio file.
</object>
Video example:
<object data="movie.mp4" type="video/mp4" width="500" height="300">
Unable to load video.
</object>
These methods are mostly used when backward compatibility is required.
Embedding another webpage
You can load a webpage inside an object, just like an iframe:
<object data="news.html" width="100%" height="400"></object>
This is helpful for small widgets, forms or displaying external resources.
Using parameters with plug-ins
Some plug-ins accept parameters using the <param> tag inside the <object> element.
Example:
<object data="player.swf" width="400" height="300">
<param name="autoplay" value="true">
<param name="loop" value="false">
</object>
Although Flash is now discontinued, this method is still relevant for certain internal systems or old web applications.
Embedding interactive maps or tools
Some legacy websites still use plug-ins to load specialized content like old map engines or document tools.
Example:
<object data="map-viewer.html" width="700" height="500">
Unable to load map viewer.
</object>
Modern websites prefer iframes or JavaScript libraries, but old formats may appear in archives or enterprise systems.
Styling embedded objects
You can style <object> and <embed> using CSS just like any other element.
Example:
<object
data="notice.pdf"
width="100%"
height="500"
style="border:1px solid #ccc; border-radius:8px;">
</object>
This is useful for making embedded content match your website’s design.
When to use plug-ins
Most plug-ins are no longer needed because HTML5 provides built-in features. However, plug-ins are still used in cases like:
-
PDF previews
-
Legacy enterprise systems
-
Old browser environments
-
Specialized document formats
-
Embedded tools that were built before modern JavaScript libraries
Understanding plug-ins helps you maintain older systems and work with archival content.
Complete example
Here is a complete webpage that displays a PDF using both object and embed methods:
<!DOCTYPE html>
<html>
<head>
<title>Plug-in Example</title>
<style>
.box {
background-color: #fafafa;
padding: 20px;
border: 1px solid #ccc;
width: 720px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>College Newsletter PDF</h1>
<div class="box">
<h3>View using the object tag</h3>
<object data="newsletter.pdf" type="application/pdf" width="700" height="500">
The PDF could not be displayed.
<a href="newsletter.pdf">Download here</a>
</object>
</div>
<div class="box">
<h3>View using the embed tag</h3>
<embed src="newsletter.pdf" width="700" height="500" type="application/pdf">
</div>
</body>
</html>
This example is common in school websites, coaching platforms, admission portals and office notice boards.
Summary of HTML Plug-ins
HTML plug-ins allow you to embed PDFs, documents and older media formats that browsers cannot handle natively. You learned how the <object> and <embed> tags work, how fallback text helps provide alternatives, how parameters work, how to embed webpages and how to style embedded content. Plug-ins are less common today, but they remain useful for PDF viewing and legacy systems. Understanding them ensures you can work with traditional content while building modern webpages.
Practice Questions
Q1. Embed a PDF file named resume.pdf using the <embed> tag.
Q2. Use the <object> tag to display guide.pdf with fallback content.
Q3. Display a YouTube video using the <iframe> tag.
Q4. Add an audio file using a plug-in-like method.
Q5. Create a link to download the file if plug-in embedding fails.
Q6. Center an embedded PDF using HTML/CSS.
Q7. Create an HTML page that uses <embed> to display a chart.
Q8. Show a message if the browser does not support <object>.
Q9. Write a proper MIME type for a PDF file in <object>.
Q10. Make embedded content responsive with CSS.
