title: Event when YouTube video finished
body: <p>I have simple html code that plays YouTube video after click on the image:</p>
  <pre><code>&lt;body&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&quot;&gt;&lt;/script&gt; 
  
  &lt;div id=&quot;ytapiplayer2&quot; style=&quot;display:none;&quot;&gt;
  &lt;object width=&quot;1280&quot; height=&quot;745&quot;&gt;
  &lt;param name=&quot;movie&quot; value=&quot;http://www.youtube.com/v/kCfP003Btjw?fs=1&amp;hl=en_US&amp;rel=0&amp;autoplay=1&quot;&gt;&lt;/param&gt;
  &lt;param name=&quot;allowFullScreen&quot; value=&quot;true&quot;&gt;&lt;/param&gt;&lt;param name=&quot;allowscriptaccess&quot; value=&quot;always&quot;&gt;&lt;/param&gt;
  &lt;embed src=&quot;http://www.youtube.com/v/kCfP003Btjw?fs=1&amp;hl=en_US&amp;rel=0&amp;autoplay=1&quot; type=&quot;application/x-shockwave-flash&quot; allowscriptaccess=&quot;always&quot; allowfullscreen=&quot;true&quot; width=&quot;1280&quot; height=&quot;745&quot;&gt;&lt;/embed&gt;
  &lt;/object&gt;
  
  &lt;/div&gt;
  
  
  &lt;img src=&quot;https://i.qmyimage.com/mgen/global/zGetImageNew.ms?args=%22shpimg4198.jpg%22,425,96,1&quot; id=&quot;imageID&quot; /&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
  $('#imageID').click(function() {
  $('#ytapiplayer2').show();
  $('#imageID').hide();
  });
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  <p>I need hide the video and show image back, after video finished play. How is it possible to implement?</p>