How to work with document.embeds in JavaScript ?

Last Updated : 01 May, 2024

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

Accessing Embedded Elements
Working with Embedded Elements

Accessing 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:

embedsOP

Working with Embedded Elements

Once you have access to an embedded element, you can interact with it by accessing its properties and methods. The specific properties and methods available depend on the type of embedded element and its implementation. You can manipulate embedded elements by controlling their playback, changing their attributes, etc.

Example: The below code will show the use of embeds property to work with 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 YouTube Video</title>
    <script src="https://www.youtube.com/iframe_api"></script>
</head>
<body>
    <h1>Working with Embedded Elements</h1>
    <!-- This div will be replaced with the 
      YouTube iframe once the API is loaded -->
    <div id="youtube-player"></div>
    
    <script>
        let player;

        // This function is called once the YouTube Iframe API is ready
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('youtube-player', {
                width: 560,
                height: 315,
                videoId: 'oM0HOxae8_A', // The YouTube video ID
                playerVars: {
                    autoplay: 1,
                },
                events: {
                    // You can add other event handlers here if needed
                }
            });
        }

        // Pause the video after 5 seconds
        setTimeout(function() {
            if (player && typeof player.pauseVideo === 'function') {
                player.pauseVideo();
            }
        }, 5000);
    </script>
</body>
  
</html>

Output:

This HTML snippet embeds a YouTube video that pauses after 5 seconds. It loads the YouTube Iframe API in the head section and sets up a div in the body where the YouTube player will be created. The onYouTubeIframeAPIReady() function initializes the YouTube player with a specific video ID (oM0HOxae8_A) and sets it to autoplay. A setTimeout function pauses the video after 5 seconds by calling player.pauseVideo(), ensuring the YouTube player is properly initialized and has the pause functionality. This setup creates a YouTube video that automatically stops after a brief delay.