title: Make Vimeo video Disappear when it ends, and Stop on click
body: <p>I'm trying to get a Vimeo iframe to 1) disappear when the video ends, and 2) disappear and stop when the user clicks outside the frame.</p>
  
  <p>I've seen a few questions about the first issue, but the Vimeo API is too complicated for my skillset without some specific guidance. The second issue I don't think has been specifically asked.</p>
  
  <p>Here's a <a href="http://jsfiddle.net/cdo2roqe/" rel="nofollow">fiddle</a> with my preexisting jquery and html stuff.</p>
  
  <pre><code>/*HTML*/
  
      &lt;div class="main_image"&gt;
      &lt;div id="video"&gt;&lt;/div&gt;
  
   &lt;a href="#" id="showVideo"&gt;
      &lt;img src="http://static.ddmcdn.com/gif/11-billion-people.jpg"&gt;
          &lt;div class="playbutton"&gt;
                  &lt;img class="image" src="http://www.onyxga.com/images/Play-Button.png"&gt;
                  &lt;img class="image hover" src="http://www.clipartbest.com/cliparts/M9c/pjy/M9cpjydTE.png"&gt;
          &lt;/div&gt;
          &lt;div id="title"&gt;Video Title&lt;/div&gt;
   &lt;/a&gt;
  
  &lt;/div&gt;
  
  
  /*script*/
  
  $('#showVideo').click(function() {
      $('#video').show().html('&lt;iframe src="http://player.vimeo.com/video/122447979?title=0&amp;amp;byline=0&amp;amp;portrait=0&amp;amp;color=d01e2f&amp;amp;autoplay=1" width="600" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen&gt;&lt;/iframe&gt;');
  });
  
     $(".main_image").mouseenter(function()
     {
         $(".playbutton").fadeIn(100);                    
     });
  
     $(".main_image").mouseleave(function()
     {
         $(".playbutton").fadeOut(100);                    
     });
  </code></pre>