How to Embed YouTube Videos in XHTML

By Andy Thomas
This article introduces XHTML and explains how to embed a YouTube video into an XHTML compliant web-page.

I'm a sucker for punishment, so I generally prefer to create web-pages using a plain text editor rather than an "easy to use" web development package such as DreamWeaver. Perhaps it's because of this that I developed a preference for using XHTML over HTML, as I find XHMTL more logically consistent.

Either HTML or XHTML can be used to write web-pages — XHTML is simply an XML compliant stream of HTML*.

Some key features which apply to XHTML, but not HTML, include:

• All elements must be closed
• Elements must be properly nested
• Element names must be lowercase
• Documents can have only one root element

Apart from personal preference, the official rationale for using XHTML is to facilitate consistent behavior across different browser technologies by enforcing "well-formed" documents and, thus, removing the possibility of parsing ambiguity.

But when it comes to the common requirement to embed a YouTube Flash video in a web-page, however, there is a small problem — the embedding code which YouTube gives for each video is HTML, rather than XHTML. See below:

YouTube Video Properties

The code looks something like this:

YouTube Embedded Code

Note the highlighted video identifier, i.e. NrH6A_VHkDA.

Embedding YouTube's code into an otherwise compliant XHTML document will result in non-compliance which may cause problems with some browsers. You can easily validate any web-page for applicable standards compliance by visiting the W3C validation service.

Instead, you can use the following x-shockwave-flash object template for XHTML 1.0/1.1:

Code Snippet

You should replace the instances of {VIDEO_ID} with the YouTube identifier for the video, such as NrH6A_VHkDA as given in the example above. You can also find this ID in the standard video URL.

You can also alter the dimensions of the video by changing the width and height properties, although I suspect that it would be wise to stay with the standard sizing options given by YouTube.

Additionally, you can enable what YouTube refers to as a "privacy-enhanced mode" if you exchange the "www.youtube.com" domain with "www.youtube-nocookie.com". In this case, YouTube claims that it will not store a cookie when the user views a web-page that contains the embedded video, but does not actually click on the video to begin playback.

However, there is some controversy over this because it seems that YouTube stores a flash-cookie (but not a standard browser cookie) on the user's machine irrespective of the privacy setting. More about this here.

*Note. This description applies to XHTML 1 versus HTML 4, and to (X)HTML 5. To be confusing, however, there was also an XHTML 2 which was distinct from HTML. However, the W3C stopped work on the XHTML 2 standard in 2009.

Copyright © Andy Thomas

For more articles by the same author, visit the Big Angry Blog.
Subscribe: Blog Feed (Atom).