Implementing Videobox in Blogger

Videobox is a 6kb script, which shows your videos in the page with an overlay. It was inspired from Lightbox.v2 and uses some of the Slimbox's code. It's written for the wonderful mootools library. And used swfobject to embed flash.

             

Steps to Add it to Blogger:




1.Login to the Blogger account

• For Multiple Usage
• For Single Usage

2. Now Go to Design > Edit HTML.

3.Now search for the </head> tag and paste the following code just Above/Before it.

<script src="http://dl.dropbox.com/u/27675057/video/js/mootools.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/video/js/swfobject.js" type="text/javascript">
</script>

<script src="http://dl.dropbox.com/u/27675057/video/js/videobox.js" type="text/javascript">
</script>
<link href="http://dl.dropbox.com/u/27675057/video/css/videobox.css" media="screen" rel="stylesheet" type="text/css"></link> 

Change the address of the player.swf in the videobox.js for the correct working of the script

2.Go to the Post/Page you want to add VideoBox and then go to Edit HTML tab .

3.Now copy the code from below and paste it there.

<script src="http://dl.dropbox.com/u/27675057/video/js/mootools.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/video/js/swfobject.js" type="text/javascript">
</script>

<script src="http://dl.dropbox.com/u/27675057/video/js/videobox.js" type="text/javascript">
</script>
<link href="http://dl.dropbox.com/u/27675057/video/css/videobox.css" media="screen" rel="stylesheet" type="text/css"></link>

Change the address of the player.swf in the videobox.js for the correct working of the script

4.Now for adding the videos into Videobox ,Firstly add the video normally like you add a Image




Now When you see the code in the edit HTML window it would be something like this


<a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" title="Youtube Video">Youtube</a>

Now just add a rel="vidbox" into the above code like this

<a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="Youtube Video">Youtube</a>


VideoBox supports all the services which use flash embedding like Youtube,MetaCafe,Spike,Google Videos,Vimeo,DailyMotion,etc and also native SWF


5.Now save the Post/Page and see the magic.


Note: Please Host all the files on free hosting service like DropBox or Blogspot itself !


Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.

             

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox