Valid XHTML to Embed a YouTube Video
Thu 2 Nov 2006I have a confession to make. For the last few days, my blog has not used valid XHTML. But don’t panic! I’ve fixed it.
Problem
The problem started when I used my first YouTube video in this post. The code supplied by YouTube uses the now-deprecated <embed> tag:
<object width="425" height="350">
<param name="movie"
value="http://www.youtube.com/v/mwc0wQt-L1Q"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/mwc0wQt-L1Q"
type="application/x-shockwave-flash"
wmode="transparent" width="425"
height="350"></embed>
</object>Solution
Bernie Zimmerman has a solution that works. He points out that by supplying correct type, style and data attributes to the <object> tag, we can leave out the <embed> tag altogether.
However, the solution I like best was suggested by minghong, one of Bernie’s commenters. It avoided using the style attribute and used the width and height attributes instead. Here’s what I eventually used:
<object type="application/x-shockwave-flash"
width="425" height="350"
data="http://www.youtube.com/v/mwc0wQt-L1Q">
<param name="movie"
value="http://www.youtube.com/v/mwc0wQt-L1Q"></param>
<param name="wmode" value="transparent"></param>
</object>But Why?
Using valid XHTML has a number of benefits. As well as giving the widest range of compatibility across various web browsers, my blog can be read on mobile phones and devices for visually impaired and disabled people.
See, it’s not just because I am a bit OCD (according to Mrs Fitz, anyway). When I go blind (The Pope told me I would), I’ll still be able to read my blog on my braille-reader. (Although, music videos might be a bit of a challenge.)
November 3rd, 2006 at 11:13
Going blind is not as much of an issue Mike… despite the Vatican threat… I mean music videos… who looks at them any more… They all look alike..
Its the deafness that impacts more…
I gather Im going deaf… Ive been tuning my wife out so much in the last few months that its actually become contagious… I tuned out a client because his problem became repetitive…. except that in one of the iterations he introduced a new element that I missed… This of course cost me dearly… as I did not get it into spec and missed a critical issue for them.
Maybe i should use UTube to illustrate my point… nah… I will obviously have to get myself a brail UI…
CHeers
November 10th, 2006 at 11:51
If I ever do get a mobile phone that can read blogs, this will be the first one I check out.
November 13th, 2006 at 1:52
Thanks a lot Mike, I’ve been looking for this code to display correctly regardless of browser… fixed all my validation errors.
November 13th, 2006 at 10:26
Neil: I don’t think music videos, as an artform, are going to die out any day (or generation) soon.
Bonestorm: I use an O2 XDA II, which is both a phone and a handheld PC. (It’s a bit old now; it runs Windows Mobile 2003, not Windows Mobile 5.) When I bought it, I could tell Mrs Fitz that I wasn’t buying a fancy phone; I was buying a software development platform!
Charlie: Happy to help.
May 13th, 2007 at 22:42
Just wanted to say thanks for the guide. I’m trying to keep my site valid (HTML 4.01 Transitional), so this really helps. Found out that if you’re using HTML 4.01 Transitional, you can skip the
"'s".Once again, thanks!
May 14th, 2007 at 0:55
You’re welcome, Hans.
Nice site, by the way. I especially enjoyed the links to Pink Floyd’s work.
September 18th, 2007 at 5:39
You can also use this simple too to make your embed code valid XHTML: http://www.tools4noobs.com/online_tools/youtube_xhtml/
April 27th, 2008 at 1:37
I have blue american pitbull puppies for sale at my website and my wife gave me this youtube embed code to put up on some of the videos she made about our pitbull puppies and it messed up my perfect xhtml. thanks so much for this info.
yipyipdog
August 26th, 2008 at 0:22
Extremely helpful. Thanks for sharing.
December 23rd, 2008 at 14:22
I’ve used your suggested code here and the code validates, but I am still having trouble with getting the youtube videos to show up in IE6. They just show up as blank white squares. Do you have any suggestions for fixing this?
December 23rd, 2008 at 16:56
G’day Iorhael,
Does the YouTube-supplied <embed> tag still work?
January 28th, 2009 at 6:49
alohomora, Thanks for your comment regarding closing the tags. I haven’t published it because the tags in your comment didn’t come through.
I don’t have your e-mail address. If you would like to e-mail your comment to me, I’ll make sure it is included here. Cheers — Mike