HTML DOM
HTML DOM embeds Collection
The embeds collection returns a live HTMLCollection of all <embed> elements in the document. It lets JavaScript loop over embedded external content such as plugins or media.
Definition and Usage
document.embeds returns an HTMLCollection of every <embed> element on the page, in the order they appear in the source. The collection is live, so it reflects embeds added or removed after the page loads. document.plugins is an alias that returns the same collection.
Each item is an embed element, so you can read attributes such as src and type. Use length to count them and bracket access to reach individual embeds.
Syntax
document.embedsProperties
| Name | Description |
|---|---|
| length | Returns the number of <embed> elements |
| [index] | Returns the embed element at the given index |
| item(index) | Returns the embed element at the given index |
| namedItem(name) | Returns the embed element with the given id or name |
Example
This page has two embed elements. Click the button to count them and list each one's type in the output box.
<!DOCTYPE html>
<html>
<body>
<embed src="clip.mp4" type="video/mp4" width="200" height="120">
<embed src="song.mp3" type="audio/mpeg">
<button onclick="listEmbeds()">List embeds</button>
<div id="out" style="margin-top:12px;"></div>
<script>
function listEmbeds() {
const embeds = document.embeds;
let text = "Total embeds: " + embeds.length + "<br>";
for (let i = 0; i < embeds.length; i++) {
text += (i + 1) + ". type = " + embeds[i].type + "<br>";
}
document.getElementById("out").innerHTML = text;
}
</script>
</body>
</html>More Examples
You can read the src of the first embed directly through its index.
<!DOCTYPE html>
<html>
<body>
<embed src="movie.swf" width="100" height="100">
<p id="out"></p>
<script>
document.getElementById("out").textContent =
"First embed src: " + document.embeds[0].src;
</script>
</body>
</html>The <embed> element is used far less today. Modern pages usually prefer <video>, <audio>, <iframe>, or <img> instead of plugin embeds.
Key Takeaways
- document.embeds returns all <embed> elements as a live HTMLCollection.
- document.plugins is an alias for the same collection.
- Use length to count and [index] to access individual embeds.
- Each item exposes attributes such as src and type.