I have written before about How to Embed Flash Valid XHTML so this time I expand on the idea to include adding a YouTube video to your site.
First of all, the embed code from YouTube typically is not XHTML nor does it provide a nice degrade for devices like the iPhone.
The following steps will show you how to create XHTML markup and provide clean fallback content. Adding fallback content is a little detail that goes a long way to make your site more professional and accessible.
Get the Embed Code
<object width="480" height="295">
<param name="movie" value="http://www.youtube.com/v/DML2WUhn2M0&hl=en_US&fs=1&rel=0&color1=0xe1600f&color2=0xfebd01&hd=1">
</param><param name="allowFullScreen" value="true">
</param><param name="allowscriptaccess" value="always">
</param><embed src="http://www.youtube.com/v/DML2WUhn2M0&hl=en_US&fs=1&rel=0&color1=0xe1600f&color2=0xfebd01&hd=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="295">
</embed>
</object>
Cleanup
Looking into the code, find and plug-in the relevant bits shown IN CAPS below:
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/VIDEOID" width="WIDTH" height="HEIGHT">
<param name="movie" value="http://www.youtube.com/v/VIDEOID" />
</object>
Add Fallback Content
<a href="http://www.youtube.com/watch?v=VIDEOID"><img src="http://img.youtube.com/vi/VIDEOID/0.jpg" width="WIDTH" height="HEIGHT" alt="[VIDEO TITLE]" /><br />YouTube Video</a>
Clean Code is Beautiful
<object type="application/x-shockwave-flash" style="width:480px; height:295px;" data="http://www.youtube.com/v/DML2WUhn2M0">
<param name="movie" value="http://www.youtube.com/v/DML2WUhn2M0" />
<a href="http://www.youtube.com/watch?v=DML2WUhn2M0"><img src="http://img.youtube.com/vi/DML2WUhn2M0/0.jpg" width="480" height="295" alt="[Louisiana Hot Sauce on my Chicken Music Video]" /><br />YouTube Video</a>
</object>
Note that you could add other parameters to the object such as <param name="quality" value="high" /> and <param name="allowFullScreen" value="true" /> but I don't think it is necessary in most cases.
I also recommend this tool to create valid embed code, although it does not provide the fallback content for you.
