javascript - 終了時にVimeoビデオを非表示にし、クリックで停止します

Question

Vimeo iframe を 1) ビデオが終了すると消え、2) ユーザーがフレームの外側をクリックすると消えて停止するようにしようとしています。

最初の問題に関するいくつかの質問を見てきましたが、Vimeo API は特定のガイダンスがないと私のスキルセットには複雑すぎます。私が考えていない2番目の問題は、特に尋ねられていません。

これは、私の既存のjqueryとhtmlのものをいじるものです。

/*HTML*/

    <div class="main_image">
    <div id="video"></div>

 <a href="#" id="showVideo">
    <img src="http://static.ddmcdn.com/gif/11-billion-people.jpg">
        <div class="playbutton">
                <img class="image" src="http://www.onyxga.com/images/Play-Button.png">
                <img class="image hover" src="http://www.clipartbest.com/cliparts/M9c/pjy/M9cpjydTE.png">
        </div>
        <div id="title">Video Title</div>
 </a>

</div>


/*script*/

$('#showVideo').click(function() {
    $('#video').show().html('<iframe src="http://player.vimeo.com/video/122447979?title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=1" width="600" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>');
});

   $(".main_image").mouseenter(function()
   {
       $(".playbutton").fadeIn(100);                    
   });

   $(".main_image").mouseleave(function()
   {
       $(".playbutton").fadeOut(100);                    
   });