Before YouTube, sharing video over the Internet was a pain. You either had to make people download the file, or embed it yourself in the Web page coding and hope they had the right plugin installed to play it back. That was hard on you, but even harder on your audience.

You want to make any media experience as easy as possible for the viewer. Here's a good example: the other day my (Michael's) really good friend George sent me a small video he'd shot on his cell phone. I tried to open it, and couldn't. It was in some weird proprietary MP4 variation.

Since he's a friend, I wrote him back and told him that. (People send me stuff like this all the time. If I don't know them, I simply delete it.) George replied with a link, saying, “You can download a player here.” I deleted that message and went on to the next 400 tasks on my plate.

If George had sent me a YouTube link, I would have clicked on it and watched his video. For several reasons. Main one is I know it will work. Second, I don't like to download programs to view something, especially if it's just a fun little time-waster. I really don't have time for anything that isn't connected to today's tasks. My personal motto is, He who dies with his art on the most hard drives . . . wins.

Look — I'm 43. Halfway through life if I'm lucky, so I have to GO GO GO GO. I don't have time to download stuff to view stuff that isn't stuff I need, and doesn't help make my stuff.

But there's a happy ending. My friend George finally got his cell-phone video converted to YouTube format, and it's pretty damn cool. Check it out:

Look Your Best: Encoding for YouTube

For the uninitiated, video conversion for YouTube smacks of black magic, but there are several proven recipes for making your movies look their best. Here's one from Alan fallofautumndistro Lastufka, the only guy I know who's actually making money on YouTube. The Emo video that he did (featuring voiceovers by my wife Debra Jean and me) has had close to half a million downloads as of this writing. [Ed. Note: Michael & Alan are working on a book of YouTube insider tips for O'Reilly, due out in Autumn 2008.] Check it out:

Note that we used a trick to embed that video here. YouTube recently started converting uploaded videos into multiple files with different resolutions. To force playback at the highest resolution, you add &ap=%2526fmt%3D18 to the end of the URLs in the embedding code. See the "High Res with One Click" sidebar for details.

As with many hacks, this one is a mix of science and voodoo. You may have noticed that the video above stopped occasionally or perhaps didn't even start. For comparison, here's the standard version, without the fmt18 attribute:

Hi-Res with One Click

YouTube now offers some videos in multiple resolutions. If you're watching a multiformat video on the YouTube site itself, you can call up different resolutions by adding a format code to the end of the URL. Adding "&fmt=6" bumps the resolution from 320x240 to 448x336 and doubles the audio sample rate from 22.05 to 44.1kHz. And adding "&fmt=18" (iPod mode) raises it to 480x360 with stereo sound. This mode also uses h.264 encoding for better video quality.

If you're signed in to YouTube, you can specify that it always serve you the highest-quality videos. But Tech Recipes offers another approach: drag this bookmarklet — YouTube Hi-Res — to your browser toolbar. Whenever you click it, the bookmarklet will add "&fmt=18" to the page's URL for you.

Wired explains how to add the format codes to the standard YouTube embedding code. Note that the hi-res videos take longer to load and are more prone to stalling during playback. —David Battino

Even the standard version looks better than most of the videos on YouTube. Here's how Alan encodes his work. He outputs from his video editing software (Sony Vegas) to 640x480 pixels, with the video quality slider set to 90% and the audio encoded as a 192kbps stereo MP3. He also specifies variable bit rate (VBR) encoding. That averages out to 1000kbps or about 10MB per minute of video at 640x480. He uses the WMV file format. If that's not an option on your encoder, he recommends AVI. "I haven't been able to find any decent size/quality settings for mov files yet," he reports.

"YouTube now offers a High Quality feature, which will play back your videos in stereo, so I now encode with stereo," he continues. "Previously, I encoded in mono to ensure what I was hearing while editing is what YouTube would play back." (For more on YouTube stereo, see the "YouTube Goes Hi-Fi" thread in the O'Reilly audio forum.)

Alan notes, "The High Quality feature is nice, and it's automatic if your video is encoded decently enough (meaning, not 320x240 mono). However, the High Quality setting applies [dynamic] compression to the audio, which can knock pre-mixed levels out of place."

Alan has experimented with a lot of different output formats, sizes, file types, and encoding rates, and he says this is the one to use. Looking at his videos (which look great), I agree. Here's a nice black and white one, called 50 Things:

Advanced YouTube Encoding

By default, YouTube converts uploaded videos to 320x240 pixel, 200kbps, Sorenson Spark-compressed Flash files, with 22.05kHz, 64kbps mono sound. (I don't like the video look, but I HATE the sound.) Some savvy producers discovered that you can upload Flash FLV files directly and bypass the destructive re-encoding process. The technique is insanely complex, but the results are undeniably great, and it doesn't depend on URL trickery. Check out this encoding of the trailer for the movie 300. It looks awesome. Sounds great, too:

Since then, far simpler techniques for producing YouTube-friendly FLV files have emerged. Squidoo has an excellent tutorial called "How To Make YouTube Videos Look Great." Of course, these hacks work for now, but there are no guarantees they'll endure.

Beyond YouTube: Alternate Video Delivery

For complete control (albeit a potential bandwidth overload), you can also post a higher quality video on your site and link to that from the About This Video box on your YouTube page.

You can also make a lower resolution version that's small enough for people to email. I did this with my “Kitty Lickin' Good” video, linking to this two-meg WMV version of it. It's had over 10,000 downloads from people emailing a link on my blog — almost three times the views of the YouTube page. I encoded it at 320x240 with 128kbps MP3 sound. It even looks half-decent full screen. Over to you, David....

Beautiful YouTube Poster Images

When you embed a YouTube movie in your site the standard way — by pasting YouTube's HTML code — you get a repulsive placeholder image. This poster frame is so blurry and seemingly random that your visitors often have no clue what the video is about. I (David) am sure I've missed seeing lots of good movies simply because their posters were so hideous.

YouTube apparently creates the poster frame by grabbing the frame exactly halfway through the movie and JPEG-compressing the heck out of it. If you're making your own video and don't mind compromising the flow, you could insert something photogenic at the halfway point. But YouTube will still smack it with the JPEG Ugly Stick. And what if you want to show other people's videos?

Having worked out a sneaky way to make poster images for embedded QuickTime movies, I thought I'd try the same technique on YouTube videos.

Here's a screenshot of the normal cruddy YouTube poster:

Yoogly Tube

Now here's a crisper poster I made by taking a screenshot of the video and overlaying a border and text. Click it to see the YouTube Poster Swapper in action:

Click to Play

The technique uses JavaScript to replace a still image with the movie-embedding code. Visitors with JavaScript disabled will still see the movie, just in a new window. Here's how it works.

I started with the standard YouTube embedding code:

<object width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/cl78K8kU-SY"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/cl78K8kU-SY" 
type="application/x-shockwave-flash" wmode="transparent" 
width="425" height="355"></embed>
</object>
As you can see, it contains an <embed> tag wrapped in an <object> tag. The content of the two tags is redundant, but the object tag is necessary for Internet Explorer and XHTML validation.

I then copied the embedding code into an external JavaScript file and replaced the code on the page with an image wrapped in a link and a div:

<div id="trigger1" align="center">
<a href="http://www.youtube.com/v/cl78K8kU-SY" target="_blank" 
onclick="viewTube(this.parentNode.id,this.href,'425','355');
return false">
<img src="graphics/youtube-poster355.jpg" alt="Click to Play" 
width="425" height="355" border="0" />
</a>
</div>

The div ID (here "trigger1") allows us to refer to this block of code later; if you want multiple posters on a page, use a unique ID for each. Also notice the onclick handler in the link. If JavaScript is enabled, the browser will intercept the visitor's click and run the function viewTube rather than opening the YouTube URL. The return false phrase prevents the browser from subsequently launching that URL, which would generate two copies of the movie.

The viewTube function passes four pieces of data to the external script:

  1. the div ID (this.parentNode.id),
  2. the video URL (this.href),
  3. the player width (425), and
  4. the player height (355).

Both dimensions are in pixels. You can scale them to other values as well. Here's the same video at 2/5 size (170x142 pixels):

Click to Play

And here is the external script, youtube-poster-swapper.js, that processes the data from the viewTube function. First it takes the four parameters from the link. Next, it plugs those values into a modified version of the YouTube embedding code. Finally, it uses the innerHTML method to replace the contents of the trigger div with the embedding code:

/*
YouTube Poster Movie Swapper, version 2008-04-17 
Written by David Battino, www.batmosphere.com
Replaces a clicked image with a YouTube movie
OK to use if this notice is included
*/
      
function viewTube(triggerID,movieURL,movieWth,movieHt) {
  var embedcode = "<object width='" + movieWth + "&autostart=1' height='" + movieHt + "'>";
  embedcode += "<param name='movie' value='" + movieURL + "'></param>";
  embedcode += "<param name='wmode' value='transparent'></param>";
  embedcode += "<embed src='" + movieURL + "&autoplay=1' type='application/x-shockwave-flash' wmode='transparent' width='" + movieWth + "' height='" + movieHt + "'></embed></object>";
  document.getElementById(triggerID).innerHTML=embedcode;
  }

Notice that I added autostart and autoplay parameters to the <object> and <embed> tags, respectively. That forces the movie to start playing as soon as it's swapped in. Otherwise, you'd just be swapping one poster frame for another.

You can download the script here (4KB zip file). To use it on your site, upload it to an appropriate directory (I'll use "scripts" in the example below) and then link to it in the HTML page by inserting the following line:

<script type="text/javascript" src="scripts/youtube-poster-swapper.js"></script> 

Note that if you try to run this script locally (i.e, from your hard drive rather than the Web), it may generate Flash or Internet Explorer warnings. I tried several complicated workarounds before discovering that all I had to do was upload the files for them to work.

As YouTube creeps toward high-resolution video, I expect its poster frames will begin to look better, but there are still lots of creative applications for this swapping technique. Check it out, and please leave a link below if you come up with something good.