title: How to play one Youtube video at a time amung the multiple embeded on same page?
body: <p>I got the code to <em>pause the already playing video</em> when user play new video. I have to embed multiple YouTube videos. What I am doing is loading few videos initially and rest when user click on show more. </p>
  
  <p>This <em>code working pretty well for the already loaded videos</em> but not for the videos loaded later i.e. after <code>window.load</code>.</p>
  
  <p>Here is the javascript code which is using YouTube's iframe API:</p>
  
  <pre><code>    var tag = document.createElement("script");
  tag.src = "//www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
  function onYouTubeIframeAPIReady() {
    console.log("function called");
      var $ = jQuery;
      var players = [];
      $("iframe").filter(function(){return this.src.indexOf("http://www.youtube.com/") == 0}).each( function (k, v) {
          if (!this.id) { this.id="embeddedvideoiframe" + k }
          players.push(new YT.Player(this.id, {
              events: {
                  "onStateChange": function(event) {
                      console.log("Event called");
                      if (event.data == YT.PlayerState.PLAYING) {
                          $.each(players, function(k, v) {
                              if (this.getIframe().id != event.target.getIframe().id) {
                                  this.pauseVideo();
                              }
                          });
                      }
                  }
              }
          }))
      });
  }
  </code></pre>
  
  <p>I tried calling this <code>function onYouTubeIframeAPIReady()</code> after loading on demand videos. Still not working.</p>
  
  <p>Please help.</p>