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.
<!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.
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
- Accessing Embedded Elements
- Working with Embedded Elements