Question

I’ve got a nice image on my website that has a play button on it. What I’d like to do is replace that image with a video (longtail video player) when a user clicks on the image. The image can be wrapped in a link or whatever.

Usually, people just have this sort of thing pop up a modal window but I was hoping for a slicker solution that would happen in the same space that the image was inside.

Is there some way to accomplish this using jQuery?

Answer 1

There are a number of ways to accomplish this, but there often quirks in the different browsers that you may have to work through.

One way is to embed the player on the page within a view that is hidden with a style (display: none). The player may have to have the wmode property in the flash embed set to “transparent” to do this. You can then hide the image and show the embed in the same location with jquery’s hide and show methods:

$('#img-el').click( function () {
    $(this).hide();
    $('#player-embed-div').show();
});

Another way to do this is to use SWFObject (http://code.google.com/p/swfobject/) to embed the video dynamically on clicking the image:

$('#img-el').click( function () {
    var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");
    so.write("img-el"); 
});

You may need to tweak the code above to get it to work and you may have trouble across browsers since the handling of Flash embedding is different across them.