I am trying to squeeze every excess byte out of my downloads. I noticed that even with the iFrame version of YouTube videos, users have to download almost 200K worth of data.
I decided to use the screenshot stored at YouTube (replace all occurrences of VIDEOID with a youtube video):
http://img.youtube.com/vi/VIDEOID/0.jpg
HTML:
<div align=center id='vidVIDEOID' stlye='clear: both; margin:0; padding:0;'>
<img class='YouTubeScreen' rel='VIDEOID' src='http://img.youtube.com/vi/VIDEOID/0.jpg' border='0' /></div>
And use jQuery javascript like this:
$(".YouTubeScreen").click(function(e) {
var vid = $(this).attr('rel');
$("#vid" + vid).html('<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/' + vid + '?autoplay=1" frameborder="0" allowfullscreen></iframe>');
});