Accessing Embedded Elements

Working with Embedded Elements

Accessing embedded elements involves using the document. embeds property, which returns a collection of all embedded elements (<embed> and <object> tags) within the current document. This collection can be iterated over to work with individual embedded elements.

Example: The below code practically implements the document.embeds property to access all embedded elements.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Embedded Videos</title>
</head>

<body>
    <h1>Embedded Videos</h1>
    <embed width="560" height="315" src=
"https://www.youtube.com/embed/oM0HOxae8_A?si=Hp6UlyupbrZfF_iS"
        title="YouTube video player" frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; 
        encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerpolicy="strict-origin-when-cross-origin" 
        allowfullscreen>
      </embed>

    <embed width="560" height="315" src=
"https://www.youtube.com/embed/mpIDwAT7m_0?si=sUB4S0AkGtwvuhDW"
        title="YouTube video player" frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; 
        encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerpolicy="strict-origin-when-cross-origin" 
        allowfullscreen>
      </embed>
    <div id="embedInfo">
    </div>

    <script>
        function displayEmbedInfo() {
            let embeds = document.embeds;
            let embedInfoDiv = 
                document.getElementById('embedInfo');
            embedInfoDiv.innerHTML = '';

            let embedCount = embeds.length;
            console.log(embedCount)
            let embedCountText = 
                document.createElement('p');
            embedCountText.textContent = 
                'Number of embedded elements: ' + embedCount;
            embedInfoDiv.appendChild(embedCountText);

            for (let i = 0; i < embedCount; i++) {
                let embed = embeds[i];
                let embedParameters = document.createElement('p');
                embedParameters.textContent = 
                    'Embedded Element ' + (i + 1) + ' - Type: ' + 
                    embed.tagName + ', Source: ' + embed.src;
                embedInfoDiv.appendChild(embedParameters);
            }
        }

        window.onload = displayEmbedInfo;
    </script>
</body>

</html>

Output:

How to work with document.embeds in JavaScript ?

The document. embeds is a property in JavaScript that provides access to all embedded elements such as <embed> and <object> tags within the current document. These embedded elements are typically used to display external content, such as media files (e.g., videos, audio) or interactive content (e.g., Flash animations).

Below are the approaches to show how you can work with the document. embeds property:

Table of Content