views:

1007

answers:

3

Is there a way to embed a YouTube video while still staying standards compliant (XHTML 1.0 Strict)?

Thanks in advance.

+6  A: 

Flash Satay:

http://www.alistapart.com/articles/flashsatay

Andy Hume
+1  A: 

+1 Andy Hume

Was just about to post that. FYI from the article this works in Firefox, depending on your support needs:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Testing</title></head>
<body>
<div>
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/2pNTrYd-4FQ&amp;amp;hl=en&amp;amp;fs=1" width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/2pNTrYd-4FQ&amp;amp;hl=en&amp;amp;fs=1" />
</object>
</div>

</body>
</html>

Make sure to escape all ampersands and I don't know whether it was just because I was trying to validate a page with just the object on but it complained that it needed to be surrounded with a div, paragraph or something...

I assume that object just can't come first in the markup.

marktucks
+1  A: 

There's a Tools4Noobs web page that will automatically do the conversion for you from the embed code that YouTube gives you to valid XHTML. You can choose what extra buttons appear and tweak how the border looks. It also adds a small advertising link, but that's easy to remove.

Here's an example generated by YouTube:

<object width="425" height="349">
    <param name="movie" value="http://www.youtube.com/v/AWCHdhyEdCc&amp;hl=en&amp;fs=1&amp;rel=0&amp;color1=0x5d1719&amp;color2=0xcd311b&amp;border=1"&gt;&lt;/param&gt;
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/AWCHdhyEdCc&amp;hl=en&amp;fs=1&amp;rel=0&amp;color1=0x5d1719&amp;color2=0xcd311b&amp;border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="349"></embed>
</object>

Here it is converted by Tools4Noobs:

<object type="application/x-shockwave-flash" style="width:425px; height:349px;" data="http://www.youtube.com/v/AWCHdhyEdCc?rel=0&amp;amp;fs=1"&gt;
    <param name="movie" value="http://www.youtube.com/v/AWCHdhyEdCc?rel=0&amp;amp;fs=1" />
    <param name="allowFullScreen" value="true" />
</object>
<div style="font-size: 0.8em"><a href="http://www.tools4noobs.com/online_tools/youtube_xhtml/"&gt;Get your own valid XHTML YouTube embed code</a></div>

Just remove the <div> at the end to get rid of the advertising link, and you're done.

Don Kirkby