<embed> : Embed External Content element

by

Introduction

The <embed> HTML element embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in.

Here is an example :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <embed src="cars.mp4" type="video/mp4" height="300px" width="700px">
</body>
</html>

Output :

When we run the program we get a video on output screen. And when we click on the play button video will play.

However, it’s important to note that ‘<embed>‘ is considered somewhat outdated, and for modern web development, the ‘<iframe>‘ element is often preferred, especially for embedding external content like videos.

Use of <embed> tag :

Here is an example :

1. Embedding Multimedia: Use <embed> to embed videos or audio files directly into a webpage. Specify the source (src) and the MIME type (type) of the multimedia content.

<embed src="example.mp4" type="video/mp4" width="640" height="360">

2. Embedding Interactive Content: Flash content or other interactive plugins can be embedded using the <embed> element. Specify the source and type accordingly.

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

3. Embedding PDF Documents: You can use <embed> to embed PDF documents directly into a webpage, allowing users to view the content without leaving the site.

<embed src="document.pdf" type="application/pdf" width="800" height="600">

4. Embedding Google Maps: You can embed Google Maps directly into a webpage using the <embed> element. Provide the appropriate URL with latitude and longitude values.

<embed src="https://maps.google.com/maps?q=latitude,longitude&output=embed" width="600" height="450">

5. Embedding Social Media Posts: For some social media platforms, you can use <embed> to embed posts directly into your webpage.

<embed src="https://www.instagram.com/p/example/" type="text/html" width="500" height="600">

6. Embedding External Widgets or Components: You can embed external widgets, components, or interactive elements that are provided by third-party services.

<embed src="widget.html" type="text/html" width="300" height="200">

It’s worth noting that while <embed> is a valid way to embed content, other elements like <iframe> are often preferred for certain types of content embedding due to better support and security features. When choosing the embedding method, consider the type of content, compatibility with browsers, and security implications. Additionally, some platforms may have specific embedding guidelines that developers should follow.

Leave a Comment