Adding image at the end of vimeo video when video is stopped

hi,


<div id="videoContent" style="display:none"></div>
               <img src="imajlar/PlayerPlay.png" id="playerPic" style="margin-top:52px; margin-left:322px;"/>

my structure is like above.my jquery is:


$("#playerPic").on("click",function(){
		$("#videoContent").append('<iframe width="900" height="350" id="vimeo" src="http://player.vimeo.com/video/41763950?api=1&player_id=player&amp;force_embed=1&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=00adef&amp;fullscreen=1&amp;autoplay=1&amp;loop=0" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowfullscreen></iframe>');
		$("#playerPic").hide();
		$("iframe#vimeo").remove();
		$("#playerPic").show();

		});

i’m trying to do that when video is stopped or paused,the image that i identified before will take place above the video.actually when video is stopped or paused,iframe should be hidden and image should be seen.how can i do this?

You will need to use the Vimeo player API in order to accomplish this as you can check the state of the video from within the iframe itself.

http://developer.vimeo.com/player/js-api

i checked vimeo api already.i just want to show the image,that i putted before the video is also should be seen after the video ended.
i mean when video is stopped,iframe should be hidden and img should be visible.

As I said already you won’t be able to do this without using the Vimeo API as you can’t detect when the finish is stopped from outside of 3rd party iframes.

i tried to check whether video is ended from iframe then i try to hide the iframe and show image but it did not work.
probably i use wrong code at the wrong place:)