HTML Plug-ins
In this page:
The Evolution of Plug-ins
In the early days of the web, browsers required third-party plug-ins to play media, run games, or display PDFs. Modern web standards have replaced these insecure plug-ins with native HTML5 tags, making pages load faster and run more securely.
Note: Avoid using legacy, plugin-based tags like object or embed for playing standard video or audio files.
Warning: Modern browsers have completely disabled support for legacy plug-ins like Flash Player due to security risks.
Example: The Evolution of Plug-ins
<video src="movie.mp4" controls></video>Embedding Resources with object
The object tag is a versatile element used to embed external resources (like PDFs, interactive widgets, or other webpage documents) directly onto your webpage, complete with width, height, and type attributes.
Note: Always include fallback text inside your object tags to assist users on devices that cannot render the resource.
Warning: Make sure your external resources are hosted securely using HTTPS protocols, as browsers will block insecure content.
Example: Embedding Resources with object
<object data="document.pdf" type="application/pdf" width="600" height="400">
Your browser cannot display this PDF.
</object>Simple Embeds with embed
The embed tag is another self-closing element used to integrate external resources or interactive tools. Unlike the object tag, it is simpler and does not wrap fallback content, relying entirely on attributes to load and size the resource.
Note: Use the embed tag for fast, simple integrations of external tools or widgets.
Warning: Because the embed tag does not support fallback content, it can display a blank block if the resource fails to load.
Example: Simple Embeds with embed
<embed src="document.pdf" type="application/pdf" width="600" height="400">Security Risks of Plug-ins
Embedding external applications can be risky, as they can run unwanted scripts on your page. Modern browsers have replaced legacy plug-ins with secure APIs and native sandboxed elements to protect user security.
Note: Only embed external applications from verified, secure sources that you fully trust.
Warning: Never embed insecure HTTP resources on a secure HTTPS website, as browsers will block them for security reasons.
Example: Security Risks of Plug-ins
<object data="https://secure.example.com/widget" type="text/html"></object>Modern Standard Alternatives
Modern web standards have introduced native APIs and elements that can handle almost all tasks previously handled by plug-ins. Use video and audio for media playback, canvas for interactive graphics, and iframes for embedding external web pages.
Note: Upgrade your legacy web projects to use modern HTML5 standards to improve site performance and security.
Warning: Relying on legacy plug-ins can make your website slow, insecure, and unusable on modern devices.
Example: Modern Standard Alternatives
<video src="movie.mp4" controls></video>
<canvas id="graphics"></canvas>
<iframe src="https://example.com"></iframe>- Using legacy plug-ins like Flash Player, which are blocked by all modern web browsers.
- Embedding insecure HTTP resources on a secure HTTPS website, causing browsers to block the content.
- Forgetting to include fallback text inside your object tags to assist users on unsupported devices.
- HTML plug-ins extend browser features, allowing you to embed external applications directly onto your page.
- Use object and embed tags to integrate external resources like PDFs, widgets, or maps cleanly.
- Modern web standards have replaced legacy plug-ins with secure, native HTML5 tags to improve performance and security.
Standard object and embed elements are supported natively, but support for legacy plug-ins (like Flash) has been disabled by all modern browsers.
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: