There are a few reasons why you might want to host your own widescreen videos on your WordPress weblog. The main one being that you won’t have to see the YouTube logo and the other instrusive cluttering ‘pop-up FX’ in embedded video. You’ll get better control over compression. You’ll also be able to break the 10-minute barrier that YouTube imposes.


Comparison:

My WordPress hosted video. Even at this small size, you can see it’s noticeably sharper than YouTube:

The YouTube hosted version of the same file:

Although the difference between the player control-bars make these look a little different in size, they’re both exactly 300 x 150px in the viewport area.


Tutorial:

Here’s my step-by-step on how to host your own widescreen videos in your WordPress weblog. You need a full install of WordPress and a web-space provider that’s not paranoid about media files such as Flash video (.flv files).

Sorry — a free hosted blog on WordPress.com won’t make the grade. Even paying for the WordPress.com space upgrade doesn’t mean you’re allowed to upload .flv files.

1. In this tutorial I’m assuming you want to show widescreen video game footage. First, capture your in-game video. I use the simple and well-loved application FRAPS for this, capturing a half-size image video from a 1920 x 1200 px widescreen monitor (960 x 600px). If you’re playing using a field-of-view extender (such as in Morrowind, above) then video proportions become a little more complicated. You will later need to “stretch” the FRAPS capture a little to get the same field-of-view effect.

2. Edit the video footage together, leave out the boring bits, add a short title (no-one likes waiting ten seconds for a video to start) and some credits. I use Adobe Premiere Elements for editing, but the free Windows Movie Maker that’s built-in to Windows Vista will also do the job. Output the edited footage to a standard AVI video at a reasonable-quality setting and using widescreen at 960 x 600px. Don’t compress it using some obscure video codec, since we need the next bit of software to be able to load the video. If you captured the video at 30 frames per second, try to output the edited video at the same FPS setting.

3. Load your finished AVI in Total Video Converter (or even the freeware AVI to FLV converter Quick Media Converter), with the intention of converting it to a FLV file. In my Total Video Converter I select “Flash video lower quality”, then further reduce the audio sampling rate to 11025 and the audio bitrate to 16kb/s — doing that will shave about 0.5mb off each 90 seconds of video. Set “video resize” to a 620 x 388 pixel proportion, and use “normal” proportion setting (or about 600 x 300 px if you want to simulate an expanded field-of-view in a game). The resulting output should weigh in at around 7Mb for 90 seconds of video. If you need it, you should be able to pack ten minutes of video into a file that’s under 70mb, and is thus feasible to you to upload and for your broadband audience to casually download.

4. Now to get the final FLV video onto your website. Upload the video by FTP, and then remember where you put it and what you named it. Make sure your web browser can load it, if you point it to the video directly. Copy that working URL, and paste it into Notepad. You’ll need it later.

5. Download the free JW FLV Media Player. Upload it by FTP to a folder on your website. This is the player that’s loading the first video you watched (see above).

6. Now obtain and install the free WP-FLV WordPress plugin, and upload it by FTP to your WordPress plugins directory. This plugin interfaces WordPress with the JW FLV Media Player that you just uploaded. (I strongly recommend it over FLV-Embed).

Go to the WordPress dashboard, activate WP-FLV, and then use “Settings” to tell WP-FLV where you put the “player.swf” file from the JW FLV Media Player.

7. Now just paste a single line of code into a WordPress posting, as specified by Joel in his WP-FLV WordPress plugin guide. There should even be a new “FLV” button on the far left of the button-strip in your ‘Write Post’ page. Press it, and add the full web address of the video, as tested earlier in your browser.

You can either set the video to play at the full 620 x 388 pixels (although you may not have the room in your WordPress column) — or more feasibly at 480 x 300 pixels, or 300 x 188 pixels. All of those are correct widescreen proportions, if you’re working your way down from a 1920 x 1200 screen.

If you play with an in-game field-of-view expander, then embedded video settings of 720 x 360px, or 600 x 300px, or 300 x 150px seem to be far more faithful to what you saw while playing the game. It’s what I’ve used for the sample videos on this page, and it works fine.

If you want higher-quality video, then try to maintain a consistent widescreen setting of 720 x 450px from step 2 onwards.


Yes, you can now get high-definition video onto YouTube, but it can be tricky to get working — and good luck using a browser to upload a HD 1280 x 720px + 44.1KHz-audio video that’s probably bumping up against YouTube’s 1Gb limit. And yes, I know the Vimeo video-hosting does HD too — but it doesn’t allow videogame footage.