Back to: HTML Tutorials
Plugins in HTML with Examples
In this article, I am going to discuss Plugins in HTML with Examples. Please read our previous article where we discussed Audio in HTML with Examples. At the end of this article, you will understand everything about HTML Plugins with Examples.
Html Plugins
Html plugins are computer programs that help enhance a web browser’s standard functionality. Java applets are an example of well-known HTML plug-ins. The <object> or <embed> tags can be used to embed plug-ins into web pages. Plug-ins can be used for a variety of purposes, like displaying maps, scanning for viruses, and verifying someone’s bank account information, etc.
The <object> Element
The HTML <object> tag is used to insert multimedia files into a webpage. Multimedia assets, such as video, music, image, PDF, Java Applets, etc. can be included in the <object> tag.
The HTML <param> element can also be used in addition with the <object> tag to specify parameters to a plugin that was included using the <object> tag.
If we insert anything between the <object> and </object> tags, it will only be displayed if the browser doesn’t support the object element.
Syntax: <object data=” “>…</object>
Example:
In the example below we have used the HTML object element to embed a gif image or video in our webpage.
Embedding a Video:
<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
</style>
<body>
<object width="500" height="300" data="https://www.youtube.com/embed/A_YbrEKA4wI"></object>
</body>
</html>
Output:
Embedding a gif image:
<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
</style>
<body>
<object width="500" height="300" data="https://i0.wp.com/www.printmag.com/wp-content/uploads/2021/02/4cbe8d_f1ed2800a49649848102c68fc5a66e53mv2.gif?fit=476%2C280&ssl=1"></object>
</body>
</html>
Output:
The <embed> Element
The HTML <embed> tag is used to include a third-party application, multimedia, plugin, or other external documents in an HTML file. Embed is a new element in HTML5.
The <embed> element can contain both third-party apps and multimedia documents, however in HTML5, the newly added <audio> and <video> elements are mostly used to embed multimedia in HTML documents.
If we insert anything between the <embed> and </embed> tags, it will only be displayed if the browser doesn’t support the embed element.
Syntax: <embed src=” ” >..</embed>
Example
In the example below we have used the HTML embed element to embed an image in our webpage.
<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
embed{
width:500px;}
</style>
<body>
<embed src="https://cdn.pixabay.com/photo/2021/05/29/07/06/shiba-6292660_960_720.jpg">
</body>
</html>
Output:
In the next article, I am going to discuss YouTube in HTML with examples. Here, in this article, I try to explain Plugins in HTML with Examples and I hope you enjoy this Plugins in HTML with Examples article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.