This article originally appeared on my web site in October of 2008, before I had it set up as a blog. I keep seeing links to the original page pop up now and then, so I’m going to republish it here and redirect the original link structure to this posting. Keep in mind that this information is four years old now, and your mileage will definitely vary.
The Original Post
Unfortunately, there is not a good way to explain this problem without having this page generate an error in the W3C HTML validator. If you are a web standards advocate, as I am, you realize the distaste of purposefully creating a page that does not validate. Though this page is not valid XHTML, I present an evidence-based, cross-browser compatible method for embedding YouTube videos in this article.
I recently made a short video and uploaded it to YouTube for all to see. The video was made using GtkRecordMyDesktop on my PC, which is running Ubuntu Linux 8.04 with Compiz desktop effects enabled.
YouTube video with EMBED tag
The problem with YouTube is in the way that they have you embed the videos within a web page. This video is placed into the page using their default HTML code. The problem with this code is that it uses the EMBED tag. Why is this a bad thing? Well, I guess it\’s because that tag is not valid for XHTML. The OBJECT tag is used to place multimedia objects within a web page when you are using XHTML. The EMBED tag was used in HTML 4.01, but has been deprecated in later revisions to the standards.
YouTube does use the OBJECT tag, but contained within that tag is an EMBED tag, invalidating the XHTML. Here is the standard code given by YouTube:
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/pV4n1UiyRKo&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true">lt;/param>
<embed src="https://www.youtube.com/v/pV4n1UiyRKo&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height=\"344\"></embed>
</object>
And here is the resulting video within the page:
YouTube video with OBJECT tag
The code which I have used below to put the video into the page is slightly different, in that it does not use the EMBED tag. It eliminates the EMBED by moving the required attributes to the OBJECT tag. One attribute, SRC, must be replaced by the DATA attribute containing the same information. The valid XHTML used on this page for the second embedded video is this:
<object width="425" height="344" type="application/x-shockwave-flash" data="http://www.youtube.com/v/pV4n1UiyRKo&hl=en&fs=1">
<param name="movie" value="http://www.youtube.com/v/pV4n1UiyRKo&hl=en&fs=1" />
<param name="allowFullScreen" value="true" />
</object>
And the result of using this code looks like this:
Attention! Keep in mind that the code which YouTube gives at the end of the video to use to embed the video into another page is their original, non-valid code.
Which works best? After testing in various browsers on differing operating systems, both are just as functional, but only the modified code validates as proper XHTML. As an added bonus, the valid XHTML uses fewer bytes of space in the file. Why not make your embedded YouTube videos valid too?
Danger sign image courtesy takomabibelot by Attribution License.
Recent Comments