Placing YouTube videos in your blog with KFE

25 Feb 07

One of the most common questions I get about using Kimili Flash Embed is how to go about posting YouTube videos on a site with it. As you’ll see, it turns out to be a relatively simple and painless process.

YouTube’s Embed Code

As you probably already know, YouTube provides “Embed” code for just about every video on its site. It’s meant as an easy way to copy and paste the code to place a video onto your site / MySpace page, or whatever. It looks something like this:

1. <object width="425" height="350">
2. <param name="movie" value="http://www.youtube.com/v/crfrKqFp0Zg"></param>
3. <param name="wmode" value="transparent"></param>
4. <embed src="http://www.youtube.com/v/crfrKqFp0Zg" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>
5. </object>

There are a couple of reasons why copying and pasting the above HTML code is not exactly ideal. If you’re using the rich text editor to write your posts in Wordpress, for instance, it will treat the code as regular text, converting the brackets to character entities and will end up just displaying the code in your post for all to read. Not exactly what we wanted. Another reason that isn’t the ideal approach is that it doesn’t easily allow for alternate content such as an image or text stating that a user needs the Flash Player to watch the video. Besides, YouTube itself uses the SWFObject code – the same code that KFE is based on and utilizes – to post videos on its own site. If it’s good enough for them, it’ll work great for you.

KFE has 3 required attributes – movie, height and width. Remember that movie is the URL to the SWF file that we want to display. If we dissect the YouTube embed code, we find that we only need the first two lines in order to get all the information we need to create a valid KFE tag. Take a look:

1. <object width="425" height="350">
2. <param name="movie" value="http://www.youtube.com/v/crfrKqFp0Zg"></param>

Using that, I can just copy the three values to create my KFE tag. If you’re using Wordpress, it looks like this:

1. [kml_flashembed movie="http://www.youtube.com/v/crfrKqFp0Zg" height="350" width="425" /]

For Textpattern users, it’s much the same:

1. <txp:kml_flashembed movie="http://www.youtube.com/v/crfrKqFp0Zg" height="350" width="425" />

You can, of course adjust the height and width to fit the layout of your site if desired, or you can simply leave it as is.

Voilá  – that’s all there is to it. Nothing else is required or necessary.

©MMII – MMVIX Michael Bester