Updates
  • Starting New Weekday Batch for Full Stack Java Development on 27 September 2025 @ 03:00 PM to 06:00 PM
  • Starting New Weekday Batch for MERN Stack Development on 29 September 2025 @ 04:00 PM to 06:00 PM
Join Course

Iframe,object,embed

Iframe

• The <iframe> element is used to embed another web page or content within the current HTML document.
• It allows you to display external content, such as videos, maps, or social media feeds, directly on your webpage.
• You specify the source of the content using the src attribute, like <iframe src="https://www.example.com"></iframe>.
• The width and height of the iframe can be adjusted using the width and height attributes.
• It's important to use <iframe> responsibly, as it can sometimes create security risks when displaying untrusted content.

            
<!DOCTYPE html>
<html>
   <head>
      <title>Iframes</title>
   </head>
   <body>
      <h1>iframe</h1>
      <iframe src="https://www.jtcindia.org"></iframe>
   </body>
</html>
        

Set height and width of iframe

• To set the height and width of an iframe, you can use the height and width attributes.
• The height attribute is used to specify the height of the iframe in pixels or as a percentage of the container's height.
• For example, <iframe src="https://www.jtcindia.org" height="300" width="400"></iframe> will set the iframe's height to 300 pixels and width to 400 pixels.
• You can also use percentage values for the height and width attributes to make the iframe responsive and adjust its size based on the container's dimensions.

            
<!DOCTYPE html>
<html>
   <head>
      <title>Iframes</title>
   </head>
   <body>
      <h1>iframe</h1>
      <iframe src="https://www.jtcindia.org" height="500" width="500"></iframe> 
   </body>
</html>
        

Embedding YouTube Video Using iframe

You can add YouTube videos in you webpage using iframe.The embedded video will be played in your browser. You can also set the height, width, border, autoplay and many more properties.

Steps to embed YouTube video:-

1. Go to the YouTube video you want to embed and click on the "Share" b`utton below the video player.
2. Click on the "Embed" option in the share menu to get the embed code.
3. Copy the iframe code provided by YouTube.
4. In your HTML document, paste the iframe code where you want the video to be displayed.
5. The YouTube video will now be embedded on your webpage, and you can watch the video directly on your site.`

            
<!DOCTYPE html>
<html>
<head>
   <title>Embedding Youtube Video</title>
</head>
<body>
   <h1>Embedding Youtube Video</h1>
   <iframe width="560" height="315" src="https://www.youtube.com/embed/p0PaJNOUuOI" title="YouTube video player"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen></iframe>
</body>
</html>
        

Object

• The <object> element is used to embed multimedia content, like images, audio, or video, into an HTML document.
• Unlike <iframe>, <object> allows fallback content to be displayed if the browser does not support the embedded content type.
• You use the <param> tag within the <object> element to specify parameters for the embedded content. • The data attribute is used to specify the URL of the multimedia file, like <object data="image.jpg"></object>.
• You can include alternate content between the opening and closing <object> tags to be displayed in unsupported browsers.

            
<!DOCTYPE html>
<html>
<head>
   <title>Object Element</title>
</head>
<body>
   <h1>Object Element</h1>
   <p>Check out the image below embedded using the object element:</p>
   <object data="coding.jpg" type="image/jpeg" width="300" height="200">
   </object>
</body>
</html>
        

Embed

• The <embed> element is used to embed external content, like multimedia files or interactive applications, into an HTML document.
• It is mainly used for embedding multimedia files, such as audio or video, in a web page.
• You specify the source of the content using the src attribute, like <embed src="audio.mp3">.
• The type attribute is used to define the MIME type of the embedded content, but it is not required for modern browsers.
• The <embed> element is not as widely supported as other methods (like <audio> and <video> tags) and may have limited functionality.
• The autostart attribute is set to "false" to prevent the audio from automatically playing when the webpage loads. If set to "true", the audio would start playing automatically.

            
<!DOCTYPE html>
<html>
<head>
    <title>Embed Element</title>
</head>
<body>
    <h1>Embed Element</h1>
    <p>Check out the audio below embedded using the embed element</p>
    <embed src="test.mp3" type="audio/mpeg" width="300" height="400" autostart="false">
</body>
</html>