<object>-embedded object

The <object> tag is used to embed external resources, such as multimedia, plugins, or other web pages, into an HTML document. It supports multiple data types, specifies the resource path via the data attribute, and allows for fallback content. Below is a detailed exploration of its usage, attributes, and practical applications.

Basic Syntax of <object>

The basic structure of the <object> tag is as follows:

<object data="resource_url" type="mime_type">
  <!-- Fallback content -->
</object>

• data: Specifies the URL of the embedded resource.
• type: Defines the MIME type of the resource (e.g., image/png, application/pdf).
• The content inside the tag serves as fallback content, displayed if the resource fails to load.

Detailed Explanation of Common Attributes

data and type

The data attribute is required and points to the external resource, while type helps the browser determine how to handle the resource in advance. For example, embedding a PDF:

<object data="document.pdf" type="application/pdf" width="600" height="400">
  <p>Your browser does not support PDFs. Please <a href="document.pdf">download the file</a>.</p>
</object>

width and height

Control the display dimensions of the embedded object, with pixels as the default unit:

<object data="video.swf" type="application/x-shockwave-flash" width="400" height="300">
  <param name="movie" value="video.swf">
</object>

form and name

• form associates the object with a specific form.
• name assigns a name to the object for scripting purposes:

<form id="form1">
  <object data="widget.swf" type="application/x-shockwave-flash" name="flashWidget" form="form1"></object>
</form>

Embedding Different Types of Content

Embedding Flash (Historical Usage)

Although Flash is obsolete, it may appear in legacy code:

<object data="game.swf" type="application/x-shockwave-flash">
  <param name="quality" value="high">
  <embed src="game.swf" quality="high" type="application/x-shockwave-flash">
</object>

Embedding SVG Images

Display vector graphics directly:

<object data="diagram.svg" type="image/svg+xml" width="200" height="200">
  <img src="diagram.png" alt="SVG Diagram">
</object>

Embedding HTML Pages

Nest other web content:

<object data="widget.html" type="text/html" width="300" height="200">
  <div>The embedded HTML content cannot be displayed.</div>
</object>

Using with <param> Tags

<param> is used to pass parameters to embedded objects, commonly seen in Java applets or legacy plugins:

<object classid="java:Applet.class" width="300" height="200">
  <param name="code" value="Applet.class">
  <param name="archive" value="applet.jar">
  <p>Java support is required to run this applet.</p>
</object>

Practical Examples

Dynamically Loading PDFs and Detecting Support

Enhance the experience with JavaScript:

<object id="pdfViewer" data="report.pdf" type="application/pdf" width="100%" height="500px">
  <div id="fallback">
    <p>PDF viewer unavailable. <button onclick="downloadPDF()">Download PDF</button></p>
  </div>
</object>

<script>
  function downloadPDF() {
    window.location.href = "report.pdf";
  }
  document.getElementById('pdfViewer').onerror = function() {
    document.getElementById('fallback').style.display = 'block';
  };
</script>

Embedding YouTube Videos (Modern Alternative)

Although <iframe> is more common today, <object> can also be used:

<object data="https://www.youtube.com/v/VIDEO_ID" width="560" height="315">
  <embed src="https://www.youtube.com/v/VIDEO_ID" width="560" height="315">
</object>

Browser Compatibility and Considerations

• Modern browsers support PDFs, SVGs, etc., well, but older versions of IE may require plugins.
• Always provide fallback content to ensure accessibility.
• Consider using <iframe> or <embed> as alternatives, especially for modern web content.

Advanced Techniques: Interacting with CSS and JavaScript

Styling objects with CSS:

object {
  border: 1px solid #ccc;
  margin: 10px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

Manipulating objects with JavaScript:

<object id="dynamicContent" data="" type="text/html"></object>

<script>
  document.getElementById('dynamicContent').data = 
    Math.random() > 0.5 ? 'page1.html' : 'page2.html';
</script>