Tip #3: Adding Your Own Videos To Sidebar

So, you’ve read Tip #2: Adding IFilm Video To Your SideBar – The Easy Way and you’ve got a question: But what if I want to add my own videos too? Don’t worry, we’ve got your answer right here…

Converting Your Videos

First off, to keep from using too many different types of files – and having your viewers download more and more programs to view your videos – you’re best bet is sticking with the same format that those IFilm.com Spike.com videos use.. namely the .flv format.

Most likely, you’re videos aren’t already in that format, so you’re going to have to convert them. My personal choice for this is the Alldj Video Converter. If your videos are under 5 minutes long each, you can use the free version. For longer videos, you’re going to have to shell out the 40 bucks for the full version. The program is pretty self-explanatory – just make sure to choose the “FLV” video format.

Displaying The Videos

Ok, so now you’ve got a flv file – but how do you play it? If you’re system is like mine, it’ll show up as an unknown file type on your desktop. To add it to WordPress, you have a couple of different options. Since the easiest option, Mac-Dev’s Flash Video Player Plugin conflicts with a plugin I’m using for viewing pictures on my site (namely, the iMP Auto SlimBox Plugin), I’m going to instead focus on using Jeroen Wejering’s FLV Player. From what I can see at a glance, the only difference is you have to double-click to play a video, rather than single-click. Since your viewers will already have to double-click to watch a Spike.com video, that’s not really much of a difference.

Time To Upload

After you’ve downloaded Jeroen Wejering’s FLV Player, extract the files and upload the mediaplayer.swf file to your website (example location: http://yoursite.com/embed/).

Upload your flv videos to your website (example location: http://yoursite.com/videos/).

The Alldj Video Converter mentioned above also lets you take a “snapshot” of your videos, so your viewers can see a picture before pressing play on your video. If you have used this feature (or created your own pictures), upload those to your website as well (example location: http://yoursite.com/images/). If you have created a picture, name it the same as your flv video (example: flv video name – “mine1.flv”; snapshot name – “mine1.jpg”). Important: if you name your snapshot something that isn’t identical to your flv video name, the below code won’t display your snapshot.

Adding Code To Your Template

In your sidebar template, where you added the code from Tip #2: Adding IFilm Video To Your SideBar – The Easy Way, you’re going to add new code and alter some of the code you’ve already added. Ready?

1. On the line after the code $video = get_post_custom_values($key = 'video');
   Add $myvid = get_post_custom_values($key = 'myvid');
2. Where you have <?php if ($video =='') { ?>
   Change to <?php if (($video =='')&&($myvid =='')) { ?>
3. Where you have <?php } else if ($video !== '') { ?>
   Change to <?php } else if (($video !=='')&&($myvid =='')) { ?>
4. Near the bottom, between </embed> and <?php } ?>
   Add <?php } else if (($video =='')&&($myvid !=='')) { ?>
<embed src="http://yoursite.com/embed/mediaplayer.swf" width="290" height="242" allowscriptaccess="always"
allowfullscreen="true" flashvars="height=242&width=290
&file=http://yoursite.com/videos/<?php echo $myvid[0];>.flv&image=http://yoursite.com/images/<?php echo $myvid[0]; ?>.jpg" />
5. In the code from Step #4, Change http://yoursite.com/embed/ to where you uploaded your mediaplayer.swf file; Change http://yoursite.com/videos/ to where you uploaded your flv files and finally, Change http://yoursite.com/images/ to where you uploaded your snapshots.
6. Note: If you want to change the size of the video on your site (the above code has it set at 290px wide by 282px high), simply change both occurences of those numbers in Step #4 above.
7. Save your changes.

And Finally…The Custom Field

You now have the code in your template to display your videos or Spike.com videos (one per post, remember). Since we used a custom field named video for adding Spike.com videos, you can use myvid for adding your own videos (if you want to change this, change myvid in Step #1 above to the custom field name you want).

Let’s say you have a video you uploaded named mine1.flv and it’s corresponding snapshot mine1.jpg. In that case you would add your custom field of myvid with a value of mine1. Simple, right?