What if there was a way for you to embed anything onto a webpage? Not just audio or video, but other webpages as well? What if you can take it a step further and actually embed external documents (like PDF files) onto your webpages?
NOTE: The elements on this webpage (audio, video, documents) may take a few minutes to load. Please be patient. Apologies in advance for any browser crashes (sorry!).
NOTE: You might need to download and install some plug-ins for some of the objects to be displayed.
This tutorial focuses on:
- The <object> tag
- Embedding another page
- Embedding audio
- Embedding video
- Embedding images
The <object> tag
The <object> tag is a rather useful, but underappreciated tag in HTML. With the <object> tag you can embed several things onto a webpage including another webpage, an external document, audio, video, and images.
In the above example, we embed another webpage using the <object> tag. It is the 'vertical frames' page from our HTML frames tutorial.
What happens if a user is using an older browser that does not support the <object> tag or the object does not get loaded for some reason such as it cannot be found? You can specify alternative content to display in this situation.
The above example is just like the first with one major difference -- we use the <a> tag to specify alternative content to display in case the object does not load.
You can even specify that if an object does not load, a different object should load.
In the above example we are saying that if the first object does not load, load the object specified within it.
There is another tag used together with the <object> tag, and that is the <param> tag. The <param> tag is used to set the settings for an embedded object. Settings like if it should start playing automatically (for an audio object), or if their should be a control panel (for video objects).
You will have to use the <object> tag together with the <param> tag and understand how they work together to create specific settings for certain objects.
NOTE: The <param> tag does not have a closing tag.
Embedding another page
To embed another page into a webpage, use the "text/html" MIME type.
You can embed audio files to play in your webpages using several different audio formats such as WAV, MP3, and MIDI. The MIME type to use depends on the format. For WAV use "audio/x-wav", for MP3 use "audio/mpeg", for MIDI use "audio/rtp-midi".
To learn more about using audio on webpages, read our HTML audio tutorial.
You can embed video files to play in your webpages using several different video formats such as MPEG, WMV, and Flash. The MIME type to use depends on the format. For MPEG use "video/mpeg", for WMV use "video/x-ms-wmv", for Flash use "application/x-shockwave-flash".
To learn more about using video on webpages, read our HTML video page.
You can embed images into your webpages using the "image/jpeg" MIME type for jpeg images (extension .jpg or .jpeg), or the "image/gif" MIME type for gif images (extension .gif).
Using the <object> tag for images is not really necessary since the <img> tag works just fine for images, but you can still use it.