Expanding videoplayer like CNN-website, prerably jQuery-based

Question

I'm wondering if anyone knows of a script/plugin, jquery-based or otherwise, which could be used to achive the effect that can be found on CNN.com. I'm talking about the videos that are representet by a small thumbnail, that when clicked expands in to the text and plays.

I'm by no means a JS-guru, and me and flash isn't the bestest of friends, but I'm not completly cluess.

Essentially, what im looking for is a way to click a thumbnail, expand a swf, and stop it if i contract it again. something like that.

ANY ideas, tips or insights are welcome!

Answer 1

Hi Nils,

A simple approach would be replacing the content of a div with the Flash video when clicked:

HTML

<div id="video-001">
    <img src="video-thumb.jpg" />
</div>

jQuery

$('#video-001').toggle(function() {
    $(this).html('<object whatevergoeshere...></object>');
}, function() {
   $(this).html('<img src="video-thumb.jpg" />');
});

This is a simple example but it can be improved a lot, maybe by inserting the image as the div background, saving the code in the cache of the element (with .data()), adding the click event to all div with a specific class...

Hope it helps :)