I started building this plugin just to make things a bit easier for embedding YouTube Videos using FancyBox.

You can embed YouTube videos by pasting the URL in the page or post starting with WordPress 2.9, but suppose you want to embed a video, you don’t want it to take up much space on your page, but you don’t want the video to be tiny either. Using an overlay is a great way to do this. Generally, Fancybox works with images rather than FlashPlayers, but there’s a pretty easy way to leverage this. Since you don’t want the actual player on the page/post anyway, you just need to insert a thumbnail image of the video. It’s really quite easy to do this using the YouTube API. The structure of a link to a youtube  video is http://www.youtube.com/watch?v= <video id>&…

 

We just need to pull the video id from that and add it to the end of http://img.youtube.com/vi/
and add /0.jpg, /1.jpg, /2.jpg, or /3.jpg.

Of course, the last three are 120×90, which isn’t much to work with. The first one is 480×360, and then we can scale it down to suit our needs.

Next, we add an play button to overlay the thumb image so it’s clear that this is a video and apply the jQuery for the FancyBox effect.

To summarize, we just need a relatively unique class name for the jquery script to attach to, and include the script in the header pointing to that class. This plugin automates all that, so all you need to enter is the video id like so:

[fancytube videoid="mj-7tZZ8fKA"  width="200" height="150" ] gives us this:

Other options are:

Height & Width: sets the dimensions of the thumbnail image.

Image – lets you set a different image than the one defined by YoutTube.

Autoplay (0 for disabled, 1 for enabled)

There’s currently not an admin options panel, but I’m open to suggestions for options to put in there.

Download: FancyTube (75)