Hi-Res YouTube Hacks
Pages: 1, 2

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.