CODEWITHSUNDEEP
javascriptjqueryonclick
jon
jon

Reputation: 6241

Replacing an image with a video on click

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?

Upvotes: 2

Views: 5977

Answers (4)

Jamie Hartnoll
Jamie Hartnoll

Reputation: 7341

A little while ago I was looking for a way to make the jpeg thumbnails of YouTube videos into a link to enlarge and open a player, in a similare way to the way Facebook shows videos in newsfeed.

The solution I used (which is definitely not the oly way, but worked for me) is similar to the answer from Pimvdb.

I simply had another page which had the YouTube player embed code on it (dynamically populated with the correct video by passing a variable to the URL) and then loaded that in with jquery.load

$('#imageElement').live("click", function () {
    $('#currentlyHiddenVideoDiv').load('videoPage.asp?vidid=idOfVideoToPlay').show()
}

You'd have to have your own method of passing the required video id/link into the player page and of course, I realise this is not with the YouTube player, but an embedded player in a separate file loaded into the required page in this method should work much the same.

This means that the video content is only loaded in when required, to the that point you just load your player button.

Upvotes: 0

Ben L
Ben L

Reputation: 2561

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.

Upvotes: 1

swatkins
swatkins

Reputation: 13630

If you don't mind the video being include onload, then I would embed both the image and the video and hide the video on startup. then, bind a clickhandler to the image that will hide the image and show the video.

var $image = $('#myimage');
var $video = $('#myvideo'); // hide #myvideo with css

$(function(){
    $image.on('click', function(){
        $image.hide();
        $video.show();
    });
});

Upvotes: 1

pimvdb
pimvdb

Reputation: 154848

You can replace the image with a <div> when clicked, and then setup the video player like this: http://jsfiddle.net/hxaZx/.

$("img").click(function() {
    var $div = $("<div>").text("this is the div to use for video");

    $(this).replaceWith($div);

    // jwplayer($div.get(0)).setup({ ... });
});

Upvotes: 1

Related Questions