Pages and elements using OBJECT, EMBED and IFRAME




What is it all about?

For various reasons, it can be an advantage to embed an element in a page. These days it is especially video that is embedded, and to some degree pdf documents, but those are not the only uses.

In the late 1990's, frames, an earlier version of the current IFRAME tag, was all the rage, as it offered some possibilities for desing, that hadn't been possible before. Today frames are only used on a very few and old websites, to some extent because the tag was removed in HTML 5. Embedding we still use a lot, and for that we have the three tags OBJECT, EMBED og IFRAME. They basically do the same, but you should be aware that the tags have some minor differences that may make one better to use that the other, when coding. In general, IFRAME is currently the most populat tag, and EMBED is supposedly being deprecated. The three tags can handle video, but here it is generally better to use the VIDEO tag, as the was created specifically for this particular use. Yoou can read more about video on websites here.






Using IFRAME

The tag IFRAME is extremely simple. The syntax to make it work is:

<IFRAME SRC="FileName"></IFRAME>


Note that though it has both a start and end tag, it has no content. Also, you don't have to specify the type as you have to do with EMBED and OBJECT. You can write something or insert images, if you want to. That will just be shown below the content being linked to in the SRC attribute.

If we try inserting the page with chess symbols in a 680 x 500 px IFRAME, having automatic scrollbar (i.e. when there is an overflow) and a black frame, 2 px wide, then the code looks like this:

<IFRAME SRC="Chess.htm" STYLE="width:680px; height:500px; overflow:auto; border-style:solid; border-width:2px; border-color:#000000"></IFRAME>


On screen it looks like this:




IFRAME has a number of specific attributes, of which a big part has vanished as a part of HTML 5. As demonstrated in the example above, being gone only means that effect has to be done using the attribute STYLE, either directly in the tag or as CSS.

The attributes are as follows:

AttributeValuesEffect
ALIGNleft
right
top
middle
bottom
Specifies the alignment (placing) of the IFRAME relative to the other elements on the page. Not supported in HTML5. The effect can be done using STYLE, which is recommended in any case.
FRAMEBORDER1
0
Specifies whether you want a border/frame on the IFRAME or not. Not supported in HTML5. The effect can be done using STYLE, which is recommended in any case.
HEIGHTpixelsSpecifies the height of the IFRAME in px. The effect can be done using STYLE, which is recommended in any case.
LONGDESCURLSpecifies a page containing a longer description of the content of the IFRAME. Not supported in HTML5. Note: The content of the file being linked to is not shown anywhere in the IFRAME.
MARGINHEIGHTpixelsSpecifies margin top and bottom for the IFRAME content. Not supported in HTML5. The effect can be done using STYLE, which is recommended in any case.
MARGINWIDTHpixelsSpecifies margin left and right for the IFRAME content. Not supported in HTML5. The effect can be done using STYLE, which is recommended in any case.
NAMEnavnSpecifies a name for the IFRAME
SANDBOXallow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation
Additional options for restrictions on the IFRAME content. Only HTML 5.
SCROLLINGyes
no
auto
Specifies whether you want to show scrollbars or not in the IFRAME. Not supported in HTML5. The effect can be done using STYLE, which is recommended in any case.
SRCURLSpecifies the address for the embedded file in IFRAME.
SRCDOCHTML_codeSpecifies HTML code to be executed in the IFRAME. Only HTML 5. Note: Content generated using SRCDOC will make content specified in SRC invisible.
WIDTHpixelSpecifies the width of the IFRAME in px. The effect can be done using STYLE, which is recommended in any case.







Using EMBED

EMBED is basically the same as IFRAME, only with fewer attributes. Formally, EMBED is an HTML 5 tag, but on several browsers it will also work for HTML 4.01, if you are using this. It just cannot be validated. As always HTML 5 is recommended for the pages.

The syntax to make EMBED work is

<EMBED SRC="FileName">


i.e. there is no end tag. If we try inserting the page with chess symbols in a 680 x 500 px EMBED, like the IFRAME above, having automatic scrollbar (i.e. when there is an overflow) and a black frame, 2 px wide, then the code looks like this:



<EMBED SRC="Chess.htm" STYLE="width:680px; height:500px; overflow:auto; border-style:solid; border-width:2px; border-color:#000000">


On screen it looks like this:




The attributes are as follows:

AttributeValuesEffect
HEIGHTpixelsSpecifies the height of the EMBED in px. The effect can be done using STYLE, which is recommended in any case.
SRCURLSpecifies the address for the embedded file in EMBED.
TYPEmedia_typeSpecifies the type of embedded file e.g. TYPE="application/vnd.adobe.flash-movie" if it is a Flash file. It does not appear to be mandatory to specify the common file types with this attribute.
WIDTHpixelSpecifies the width of the EMBED in px. The effect can be done using STYLE, which is recommended in any case.

As demonstrated in the example above, any styling has to be done using the attribute STYLE, either directly in the tag or as CSS.


Using OBJECT

The tag OBJECT is a bit older than IFRAME and EMBED and works under HTML 4.01 as well. The syntax to make it work is:

<OBJECT DATA="FileName"></OBJECT>


Note that here we use the attribute DATA instead of SRC which is the attribute normally used for file/path. Also note that though it has both a start and end tag, it has no content. You can write something or insert images, if you want to. That will just be shown below the content being linked to in the DATA attribute.

If we try inserting the page with chess symbols in a 680 x 500 px OBJECT, like the IFRAME above, having automatic scrollbar (i.e. when there is an overflow) and a black frame, 2 px wide, then the code looks like this:

<OBJECT DATA="Chess.htm" STYLE="width:680px; height:500px; overflow:auto; border-style:solid; border-width:2px; border-color:#000000"></OBJECT>


On screen it looks like this:




OBJECT has a number of specific attributes, of which a big part has become invalid in HTML 5. As demonstrated in the example above, being gone only means that effect has to be done using the attribute STYLE instead, either directly in the tag or as CSS.



The attributes are as follows:

AttributeValuesEffect
ALIGNleft
right
top
middle
bottom
Specifies the alignment (placement) of the OBJECT relative to the other elements. Not supported by HTML 5. The effect can be done using STYLE, which is recommended in any case.
ARCHIVEURLLink to files that needs to be uploaded along with the object to make it work right. Not supported by HTML 5.
BORDERpixelSpecifies whether there has to be a border/frame aounf the OBJECT by specifying a width in px. Not supported by HTML 5. The effect can be done using STYLE, which is recommended in any case.
CLASSIDclass_IDReference number that OBJECT needs to handle the content correctly. Either a reference to Windows Registry or a link. Not supported by HTML 5.
CODEBASEURLLink to where you can find the code base for CLASSID. Not supported by HTML5.
CODETYPEURLSpecifies the type of embedded file, e.g. a Word file: CODETYPE="application/msword" or a Flash animation: CODETYPE="application/x-shockwave-flash". This is slightly different from TYPE, which specifies the type of embedded object. Not supported by HTML 5.
DATAURLSpecifies the address for the embedded file in OBJECT.
DECLAREdeclareSpecifies that the object should only be declared, not created or instantiated until needed. Not supported by HTML 5.
FORMform_idSpecifies the ID for forms, that the object may refer to. New in HTML 5.
HEIGHTpixelsSpecifies the height of the OBJECT in px. The effect can be done using STYLE, which is recommended in any case.
HSPACEpixelsSpecifies whitespace/padding to the object's left and right. Not supported by HTML 5. The effect can be done using STYLE, which is recommended in any case.
NAMEnavnSpecifies a name for the OBJECT
STANDBYtextSpecifies a text to be shown while uploading the object. Not supported by HTML 5.
TYPEmedia_typeSpecifies the type of embedded object e.g. TYPE="application/vnd.adobe.flash-movie" if it is a Flash file. It does not appear to be mandatory to specify this attribute for the common file types.
USEMAP#mapnameSpecifies ID for maps created using the MAP tag, if you have one. Does not work for all browsers.
VSPACEpixelsSpecifies whitespace/padding over and under the object. Not supported by HTML 5. The effect can be done using STYLE, which is recommended in any case.
WIDTHpixelSpecifies the width of the OBJECT in px. The effect can be done using STYLE, which is recommended in any case.