Have you ever had to create a site with YouTube videos and hated pasting those long embed html’s into your blogs? Do you wish you could simply reference the code whilst optionally specifying the variable stuff such as “width”, “height”, “video” and “autoplay”? WP Chameleon provides the solution by making it possible to easily and transparently create pages that can be used as templates within your posts.
I have created two WordPress sites that use WP Chameleon and YouTube videos, which will serve as handy examples for this article:
- http://www.chameleonshops.com/ (I created this site to re-direct people to who were hitting this site but were actually interested in chameleon pictures), and
- http://three-stores.co.uk (A site selling products from 3 Mobile’s 3 Store).
As mentioned above, both sites use WP Chameleon and incorporate YouTube videos. The sites both use the free ArcLite theme (with some small modifications).
The sites have been configured to show post categories on the menu bar and all pages on the site consist of posts. I use WordPress pages as templates within these posts. The prime example of a page used as a tempate is the “Video” page, it consists of the following code:
{rewrite}<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="[@width]" height="[@height]" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="wmode" value="transparent" /><param name="flashvars" value="autoplay=[@autoplay]" /><param name="allowNetworking" value="internal" /><param name="allowScriptAccess" value="never" /><param name="src" value="http://www.youtube.com/v/[@video]&hl=[@language]&fs=1&autoplay=[@autoplay]&rel=0&start=0&color1=0x2b405b&color2=0x6b8ab6&border=1;" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="[@width]" height="[@height]" src="http://www.youtube.com/v/[@video]&hl=[@language]&fs=1&autoplay=[@autoplay]&rel=0&start=0&color1=0x2b405b&color2=0x6b8ab6&border=1;" allowscriptaccess="never" allownetworking="internal" flashvars="autoplay=[@autoplay]" wmode="transparent" allowfullscreen="true"></embed></object>{/rewrite}
Once you have this template set up you can add videos to any post by simply adding:
{rewrite}[call(globals/@videopost,@video{KMT1FLzEn9I},@autoplay{1},@language{en},@width{400},@height{300})]{/rewrite}
“videopost” is a site variable that must be defined on the chameleon settings page and must contain the post id of the “Video” page.
You can specify defaults for the parameters “language”, “autoplay”, “width” and “height” by adding correspondingly named custom variables to the “Video” page. This will reduce the amount of code needed in each post to:
{rewrite}[call(globals/@videopost,@video{KMT1FLzEn9I})]{/rewrite}
OR
{rewrite}[call(globals/@videopost,@video[@youtubevidid])]{/rewrite}
, if you are using the Youtube Comments plug-in as i did.
Cool, huh?
