Adding video to a blog can be a bit of an ordeal. One solution I have employed in the past is to upload the video to Google Video and use the embeded video code snippet in my blog. That works, but it does require you to download a video.
Another viable solution is to reference the video and play it from another location. This is the solution I have been looking for. ShadowBox was the answer. Despite having excellent documentation, I got a bit lost in the bare minimum required to utilize the tool. In the end, the following proved successful.
- Download the code – I used the js and css folders.
- Download the Yahoo User Interface Library – all you will need is the utilities.js file. I renamed this to yui-utilities.js and placed it in a lib folder.
- Upload the js, css, and lib folder to your wordpress blog
Insert the following code into the <head> section of the header.php page:
<link rel="stylesheet" type="text/css"
href="/wp-admin/css/shadowbox.css">
<script type="text/javascript"
src="/wp-admin/js/lib/yui-utilities.js"></script>
<script type="text/javascript"
src="/wp-admin/js/adapter/shadowbox-yui.js"></script>
<script type="text/javascript"
src="/wp-admin/js/shadowbox.js"></script>
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(Shadowbox.init);
</script>
Voila! You have set everything up!
There are two major rules to adding video:
- Specify a rel attribute
- Specify the size of the video
The following is an example provided by the author:
<a href="http://mjijackson.com/shadowbox/gallery/skip.swf"
rel="shadowbox;height=140;width=120">My Movie</a>
My Movie
Continue reading Michael Jackson’s description for further details.