Embed YouTube Videos without YouTube

I hate just post­ing a YouTube video here, in part because it’s lazy and bor­ing, but also because YouTube videos are liable to dis­ap­pear at any moment, and even if they don’t, YouTube has to die someday, right?, where­as kbps will last for­ev­er, and then hun­dreds of years from now its YouTube posts will be inex­plic­a­bly emp­ty.

Part of what helped launch YouTube to the pop­u­lar­i­ty it enjoys now is the ease of its play­er. Every­body has Flash, so while most video sites were mak­ing you do 30 min­utes of work installing plu­g­ins to play a 12-sec­ond clip, YouTube just worked. The object that’s embed­ded on a YouTube page is an .swf (Shock­wave Flash) file, a video play­er in which an .flv (Flash video) file is “wrapped.” So, in order to host a video your­self, you need these two com­po­nents.

The .flv file — the video itself — can actu­al­ly be down­loaded direct­ly from YouTube quick­ly and eas­i­ly with the All-In-One Video Book­marklet. Just put it in your links tool­bar, then on any YouTube page, click it and fol­low the down­load link. Alter­nate­ly, you can use the VideoDown­loader Fire­fox exten­sion.

You can’t sim­i­lar­ly steal YouTube’s .swf video play­er, so instead, use the open-source Flash Video Play­er by Jeroen Wijer­ing. It’s a .zip file with sev­er­al readmes and sources, but all you real­ly need from it is the flvplayer.swf file.

Upload flvplayer.swf and the .flv video file to your serv­er, and use embed code sim­i­lar to YouTube’s:

<embed src="http://www.yourhost.com/flvplayer.swf"
width="425" height="350"
bgcolor="#FFFFFF" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
flashvars="file=http://www.yourhost.com/videos/skatebordinggirls.flv" />

Full doc­u­men­ta­tion on the avail­able options comes in a readme.html file. But essen­tial­ly that’s all it takes. And of course, you’re not lim­it­ed to YouTube, as there are plen­ty of soft­ware tools to con­vert most video for­mats to .flv, for exam­ple Medi­a­Coder.

Here’s the result: