title: YouTube (injected) video ends callback
body: <p>I inject YouTube iframe to a div in document ready and bind it to click:</p>
  
  <pre><code>jQuery(document).ready(function($) {
      jQuery('.video-thumb').click(function(){
          ...
          $('#player').html('&lt;iframe width="761" height="421" src="http://www.youtube.com/embed/' + $(this).attr('videoid') + '?rel=0&amp;wmode=transparent" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;');
          ...
      }
   }
  </code></pre>
  
  <p>And I want to do a callback when video ends. I have read about <a href="https://stackoverflow.com/questions/7853904/how-to-detect-when-a-youtube-video-finishes-playing">onYouTubePlayerAPIReady</a>, but it has to be put outside document ready.</p>
  
  <p>I have tried to load video player by this construction outside document ready:</p>
  
  <pre><code>var player;
  function onYouTubePlayerAPIReady() {
      player = new YT.Player('player', {
        height: '421',
        width: '761',
        videoId: '',
        playerVars: { autoplay: 1, autohide: 1, showinfo: 0 },
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
  }
  </code></pre>
  
  <p>but I got some issues:</p>
  
  <ul>
  <li>showinfo:0 didn't work, still got other video thumbnails in the end</li>
  <li>I don't know how to change video id (and reinit the video?)</li>
  <li>more script errors than first method (injecting iframe)</li>
  </ul>
  
  <p>I prefer using first method, but how to create video ends callback? Thanks.</p>