Embed YouTube videos while staying XHTML 1.0 Strict?

Asked 14/2, 2009 at 22:7 Answered 21/12, 2009 at 19:17

Solved html youtube xhtml-1.0-strict

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

Thanks in advance.

Daedal answered 14/2, 2009 at 22:7 Comment(0)

Flash Satay:

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

Guillemette answered 14/2, 2009 at 22:12 Comment(0)

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&hl=en&fs=1&rel=0&color1=0x5d1719&color2=0xcd311b&border=1"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/AWCHdhyEdCc&hl=en&fs=1&rel=0&color1=0x5d1719&color2=0xcd311b&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;fs=1">
    <param name="movie" value="http://www.youtube.com/v/AWCHdhyEdCc?rel=0&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/">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.

Cene answered 21/12, 2009 at 19:17 Comment(0)

+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">
<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;hl=en&amp;fs=1" width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/2pNTrYd-4FQ&amp;hl=en&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.

Migrant answered 14/2, 2009 at 22:34 Comment(0)

Recommended topics

Hot tags