<object> Tag Examples
Examples of the object
tag in HTML 5
Example of embedding video in HTML 5
The "old" YouTube embed code used an <object> tag and an <embed> tag. (The "new" YouTube code uses the <iframe> tag.)
<object width="640" height="390"> <param name="movie" value="http://www.YouTube.com/v/GGT8ZCTBoBA?fs=1&hl=en_US"/> <param name="allowFullScreen" value="true"/> <param name="allowscriptaccess" value="always"/> <embed src="http://www.YouTube.com/v/GGT8ZCTBoBA?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="390"/> </object>
Since the <param/>
tag is a void element, it is not allowed to have any content, even HTML comments and therefore should always be coded as a self-closing standalone tag, ending with the delimiter string />
rather than just >
(<param .../>
). The <embed> tag provides a fallback for browsers that do not support the <object> tag.
Demo of embedded YouTube video:
embedded YouTube video
(Note that this video will probably not play if your current browser does not yet support HTML 5 video.)
Embedding video with fallback
The <object> tag can be combined with some other tags, such as the <video> tag <audio> tag to provide a fallback when the browser does not support the type of media provided. The <object> tag for fallback media is coded within the <audio> or <video> tag as shown in the following example, which falls back to an embedded YouTube video:
<video poster="poster.png" controls="controls" style="border: black 1px solid; margin: 4px"> <source src="http://Vyd.com/video.ogv" type="video/ogg; codecs="theora,vorbis""/> <source src="http://Vyd.com/video.mp4" type="video/mp4; codecs="avc1.42E01E,mp4a.40.2""/> <object width="1280" height="745"> <param name="movie" value="http://www.YouTube.com/v/ZXYVyrrUZ3c&hl=en_US&fs=1&rel=0&hd=1"/> <param name="allowFullScreen" value="true"/> <param name="allowscriptaccess" value="always"/> <embed src="http://www.YouTube.com/v/ZXYVyrrUZ3c&hl=en_US&fs=1&rel=0&hd=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1280" height="745"/> </object> </video>