Stop youtube video and replace with image
===

I am working with embeded youtube video. I need to replace it with the image and when the image is clicked the video starts playing which I have implemented:

    <script type="text/javascript">
       function start_video() {
          var iframe = '<iframe title="YouTube video player" width="590" height="360" src="http://www.youtube.com/embed/nCgQDjiotG0?autoplay=1&amp;rel=0&showinfo=0" frameborder="0" title="none" allowfullscreen></iframe>';
          document.getElementById("video_player").innerHTML = iframe;
       }
    </script>

And html:

    <div id="video_player"><img style="cursor: pointer;" onclick="start_video();" src="fake_image.jpg" alt="Play Video" /></div>

But now I have a problem stopping this video by clicking on some div or some other element and replacing video back with image at the same time.