When I was making my new theme I had a goal to make it XHTML and CSS clean. So I started to fix everything that cause the errors. But than I realized that one post with Youtube videos embedded was causing a lot of errors. It’s because Youtube is using some non standard XHTML code for this.
Here is the example of that Youtube code:
<object width="640" height="505"><param name="movie" value="http://www.youtube.com/v/fhyApMVm9Rs&hl=en&fs=1&color1=0x006699&color2=0x54abd6"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/fhyApMVm9Rs&hl=en&fs=1&color1=0x006699&color2=0x54abd6" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="505"></embed></object>
If you go to W3 validator you will get a lot of errors. I created a simple page with just one embedded Youtube video and if I validate it I get 24 errors and 4 warnings.
There is a solution for this, you can use this code to make that embedded video XHTML clean:
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/K5Y8s_HzuD8" width="425" height="344"><param name="movie" value="http://www.youtube.com/v/K5Y8s_HzuD8" /><param name="FlashVars" value="playerMode=embedded" /><param name="wmode" value="transparent" /></object>
You need to change the K5Y8s_HzuD8 with ID of a video you need to embed and change the size of video. There are 3 parameters that you need to change and all 3 are repeated once, so you need to do 6 changes or 2 if the size doesn’t matter (of video)
.
To make this easy I made a shortcode to simplify this and now it’s even easier to embed clean XHTML video than coping code from Youtube. Find functions.php in your theme folder and put this:
function youtube_embed($atts, $content = null){
extract(shortcode_atts(array(
'size' => 'm'
), $atts));
if($size=="s" || $size=="S"){$width=320; $height=265;}
elseif ($size=="m" || $size=="M"){$width=425; $height=344;}
elseif ($size=="l" || $size=="L"){$width=480; $height=385;}
elseif ($size=="xl" || $size=="XL"){$width=640; $height=505;}
$content = str_replace("watch?v=", "v/", $content);
$output='<object type="application/x-shockwave-flash" data="' . $content . '" width="' . $width . '" height="' . $height . '"><param name="movie" value="' . $content . '" /><param name="FlashVars" value="playerMode=embedded" /><param name="wmode" value="transparent" /></object>';
return $output;
}
add_shortcode('youtube', 'youtube_embed');
Shortcode API is something like [music] if you insert something like this in your post it will call a function that is declared to handle this code.
Now for embedding youtube videos we will use a short code like:
[youtube]http://www.youtube.com/watch?v=K5Y8s_HzuD8[/youtube]And it will embed your video in the default size (width 425 and height 344). To change the size use it like this:
[youtube size="l"]http://www.youtube.com/watch?v=K5Y8s_HzuD8[/youtube]You can use:
- size=”s” (width 320 height 265)
- size=”m” (width 425 height 344 : default)
- size=”l” (width 480 height 385)
- size=”xl” (width 640 height 505)
So here are examples of embedding video and by the way watch that video it’s very funny
.
Size S
Size M
Size L
Size XL








Hardware: The parts of a computer system that can be kicked.



Thanks a lot. That works great. Youtube should adopt your method.