Simple and XHTML clean embedding Youtube videos

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:

And it will embed your video in the default size (width 425 and height 344). To change the size use it like this:

You can use:

1. size=”s” (width 320 height 265)
2. size=”m” (width 425 height 344 : default)
3. size=”l” (width 480 height 385)
4. 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

Related Posts

1. New clean theme
2. Windows XP crazy error songs
3. Starting with jQuery – Learning basics