Embed Videos in WordPress Mu

So, lately I’ve been getting into screencasting and thought the development of this WordPress mu blog would be a good subject to publish through the medium of screencast, the irony is wordpress mu doesn’t support embedded video!

Ok, so it wasn’t all bad. I quickly found out why the embed tags are strip when you save a post, they poses a security risk because it gives users access to your file system, which is something you don’t want in a typical mu setup where you don’t know who your users are. I also quickly found a solution, the wordpress video plugin. This gives users a real simple way to embed flash content from about 50 popular video sites including youtube, last.fm and Yahoo! Video. You can see all the the site they support on there instructions page. So this plugin helped a lot but I still had a couple of problems. Firstly the plugin, typically didn’t support screentoaster.com which is where I host my screencasts and secondly I don’t have a typical WordPress mu setup, I don’t have the security risk that are associated with blog hosting, I know  the owners and publishers of the blogs we host because 90% of them are me and I needed the video plugin to support flash files that I host.

The code in the video plugin is well written and so was easy to hack. The code snippets below can be copied and pasted into the wordpress video plugin, video.php file or you can paste them into you functions file in your theme folder. the screentoaster code is safe to use in all wordpress mu installations. The self-hosted code is not safe to use if you allow members of the public to host there own blogs only use it if you completely trust you bloggers.

Screentoaster function

//Screentoast Code

define("ST_WIDTH", 425); // default width

define("ST_HEIGHT", 344); // default height

define("ST_REGEXP", "/\[screentoaster ([[:print:]]+)\]/");

define("ST_TARGET", "<object width=\"###WIDTH###\" height=\"###HEIGHT###\" type=\"application/x-shockwave-flash\" data=\"http://www.screentoaster.com/swf/STPlayer.swf\"  codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0\"><param name=\"movie\" value=\"http://www.screentoaster.com/swf/STPlayer.swf\"/><param name=\"allowFullScreen\" value=\"true\"/><param name=\"allowScriptAccess\" value=\"always\"/><param name='flashvars' value=\"video=###URL###\" /></object>");

function screentoaster_plugin_callback($match)

{

	$tag_parts = explode(" ", rtrim($match[0], "]"));

	$output = ST_TARGET;

	$output = str_replace("###URL###", $tag_parts[1], $output);

	if (count($tag_parts) > 2) {

		if ($tag_parts[2] == 0) {

			$output = str_replace("###WIDTH###", ST_WIDTH, $output);

		} else {

			$output = str_replace("###WIDTH###", $tag_parts[2], $output);

		}

		if ($tag_parts[3] == 0) {

			$output = str_replace("###HEIGHT###", ST_HEIGHT, $output);

		} else {

			$output = str_replace("###HEIGHT###", $tag_parts[3], $output);

		}

	} else {

		$output = str_replace("###WIDTH###", ST_WIDTH, $output);

		$output = str_replace("###HEIGHT###", ST_HEIGHT, $output);	

	}

	return ($output);

}

function screentoaster_plugin($content)

{

	return (preg_replace_callback(ST_REGEXP, 'screentoaster_plugin_callback', $content));

}

add_filter('the_content', 'screentoaster_plugin',1);

add_filter('the_content_rss', 'screentoaster_plugin');

add_filter('comment_text', 'screentoaster_plugin');

Instructions

To embed a video hosted by screentoster use the following short code in your posts or pages

[screentoaster urlcode height width]

simply replace urlcode with the long string of letters and numbers that appears in the url of the video you want to watch. If you want too specify the size of the of the video just add the height and the width.

examples

[screentoaster stUk9RREZIR11cRlpeXF1RVlZX ]

or

[screentoaster stUk9RREZIR11cRlpeXF1RVlZX 300 400 ]

Self-hosted flash files

//Upload Code

define("SELF_WIDTH", 425); // default width

define("SELF_HEIGHT", 344); // default height

define("SELF_REGEXP", "/\[uploaded ([[:print:]]+)\]/");

define("SELF_TARGET", "<object width=\"###WIDTH###\" height=\"###HEIGHT###\" type=\"application/x-shockwave-flash\" data=\"###URL###\"  type=\"application/x-shockwave-flash\"><param name=\"movie\" value=\"###URL###\"/><param name=\"allowFullScreen\" value=\"true\"/><param name=\"allowScriptAccess\" value=\"always\"/><param name='flashvars' value=\"video=###URL###\" /></object>");

function self_plugin_callback($match)

{

	$tag_parts = explode(" ", rtrim($match[0], "]"));

	$output = SELF_TARGET;

	$output = str_replace("###URL###", $tag_parts[1], $output);

	if (count($tag_parts) > 2) {

		if ($tag_parts[2] == 0) {

			$output = str_replace("###WIDTH###", SELF_WIDTH, $output);

		} else {

			$output = str_replace("###WIDTH###", $tag_parts[2], $output);

		}

		if ($tag_parts[3] == 0) {

			$output = str_replace("###HEIGHT###", SELF_HEIGHT, $output);

		} else {

			$output = str_replace("###HEIGHT###", $tag_parts[3], $output);

		}

	} else {

		$output = str_replace("###WIDTH###", SELF_WIDTH, $output);

		$output = str_replace("###HEIGHT###", SELF_HEIGHT, $output);	

	}

	return ($output);

}

function self_plugin($content)

{

	return (preg_replace_callback(UPLOAD_REGEXP, 'self_plugin_callback', $content));

}

add_filter('the_content', 'self_plugin',1);

add_filter('the_content_rss', 'self_plugin');

add_filter('comment_text', 'self_plugin');

Instructions

To embed a flash object hosted on your own blog, upload the flash file in the usual way and make a note of the files URL and use the following short code in your post or page

[self fileurl height width]

simply replace fileurl with the URL of the file you upload. If you want to specify the size of the of the video just add the height and the width.

examples

[self http://wordpress-design.co.uk/wp-content/files/2009/05/yourflashfile.fla ]

or

[self http://wordpress-design.co.uk/wp-content/files/2009/05/yourflashfile.fla 300 400 ]

Thanks goes to Oliver Wunder for the WordPress video plugin