M.Y. Lessons Learnt

Since version 1.1.2 (?) of Lifetype, you can embed Youtube and Google videos in the post easily. But there are other good video sites such as Metacafe.com and livevideo.com, so how can we embed those videos into the post? Here is the how to guide, but some background first.

You know, to include a video in the post, just click the Youtube icon from the editor toolbar, and then enter the video URL (copy from Youtube), e.g. http://www.youtube.com/watch?v=XXXXXXXXXXX

Lifetype will turn this command after you confirm it to a bunch of codes:

Now back to Metacafe.com, if you find a video you like to embed to your blog post, you cannot simply copy the embed code from Metacafe and copy to your post because Lifetype will strip out all the tags she doesn’t like.

However, all you need is from the Metacafe video page, capture 3 values:

1. The source (most likely in the format of http://www.metacafe.com/fplayer/999999/YYYYY.swf)
2. The width of the video (most likey 400)
3. The height of the video (most likey 345)

Now to embed this video to your post, just follow the steps:

1. Click the HTML icon from the editor menu bar
2. Enter (or copy from somewhere) the above Youtube bunch of codes
3. In the objecttag, replace the width, heightand data attribute with what you got from Metacafe.
4. In the param tag (with name=”movie”), replace the attribute “value” with the source URL from Metacafe.

Update it and you are done !! BTW, the tricky thing with this approach is you won’t see the “Video player” in your editor window, but only in the HTML, the blog post preview or the blog post itself.

Sample here … the second video in the Chinese New Year post.

Enjoy.

Since I implemented Prototype and Script.aculo.us for the Lightbox photo album some time ago, I found that I can do more with these libraries – for example a Fade-in / Appear effect for my blog and posts (you can see it, can’t you ?). Now it’s the how to guide:

• Provided that you already included the … for prototype.js and scriptaculous.js in the header.template;
• Then in the same file, find the line of <div id=”content”>
• Add a new attribute to it style=”display:none;”
• Then open the file main.template (your template set may have another name), add the following code right after the template loop through all the posts, but before the links and footer:

{literal}

//

{/literal}

• You can adjust the duration to whatever seconds, you know.
• Apply the same changes to other template files, if required.
• Then upload the those template files to the server, and you are done !!

Enjoy !!