There are two different syntaxes for embedding a p3d file in a web page. Internet Explorer requires one particular syntax, and every other browser in the world requires another syntax, similar but slightly different. Fortunately, it is possible to write a single web page that supports both syntaxes at the same time.

This discussion assumes you are comfortable with writing HTML code in a web page. If you are unfamiliar with HTML syntax, we recommend you study a brief tutorial on writing web pages using HTML before continuing.

For Internet Explorer, you must use the <object> element to embed a p3d file, with code like this:

<object width="640" height="480"
  classid="CLSID:924B4927-D3BA-41EA-9F7E-8A89194AB3AC">
    <param name="data" value="myapp.p3d">
</object>

Note that the width and height are specified as attributes to the <object> element. The classid string is literal, and must always be the exact string shown above; this is the string that identifies the Panda3D plugin. The URL of the p3d file to be launched should be specified as an attribute of the nested <param> element, as shown above.

For other browsers, you also use the <object> element, but it looks a little bit different:

<object width="640" height="480"
  type="application/x-panda3d" data="myapp.p3d">
</object>

In non-Internet Explorer browsers, you identify the Panda3D plugin with the string type="application/x-panda3d", instead of with the classid string used by Internet Explorer. Also, the URL of the p3d file is specified as an attribute of the <object> element, instead of in a nested <param> element.

In order to design a web page that works on any browser--and you should always design web pages that do--you can embed one <object> element within the other. This works because if a browser encounters an <object> element that it doesn't understand, it is supposed to load whatever is within that <object>'s nested scope, which might be another <object> element. So, for instance, the above examples could be written like this:

<object width="640" height="480"
  type="application/x-panda3d" data="myapp.p3d">
    <object width="640" height="480"
      classid="CLSID:924B4927-D3BA-41EA-9F7E-8A89194AB3AC">
        <param name="data" value="myapp.p3d">
    </object>
</object>

The outer <object> element is the non-Internet Explorer version, and in case that isn't understood (for instance, because the user is running Internet Explorer), then it will fall to the inner <object> element instead, which is the Internet Explorer version.

We recommend putting the non-Internet Explorer version on the outside, because some versions of Safari seem to get confused if they encounter the Internet Explorer version first.

Note that there are additional, optional attributes that may be provided to either form of the <object> tag. These are discussed in Advanced object tags.