title: youtube iframe api through ajax
body: <p>I have s system where the main content is loaded through ajax, inside a div of the main 'frame'.</p>
  
  <p>In some pages, I need to track when the user finish playing a video. I'm trying to use youtube iframe api. It works ok, but I'm running on some strange things.</p>
  
  <p>The main problem: the actions to happened when the user finishes watching the video are different on each page, and somehow, the API is stacking all the functions and running all at once.</p>
  
  <p>By example, I have the first page, that is loaded through ajax, and have this snippet to load youtube video:</p>
  
  <pre><code>&lt;script&gt;
    // 2. This code loads the IFrame Player API code asynchronously.
    if (window.YT)
    {
      window.YT = undefined;
    }
  
    var tag = document.createElement('script');
  
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
  
    // 3. This function creates an &lt;iframe&gt; (and YouTube player)
    //    after the API code downloads.
    var player = undefined;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('divVideo', {
        playerapiid: 'somecode',
        height: '309',
        width: '439',
        videoId: 'somecode',
        events: {
          'onStateChange': onPlayerStateChange
        }
      });
    }
  
    // 4. The API calls this function when the player's state changes.
    //    The function indicates that when playing a video (state=1),
    //    the player should play for six seconds and then stop.
    function onPlayerStateChange(event) {
      if (event.data == YT.PlayerState.ENDED ) {
       actionToScreen1()
      }
    }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>It works ok. But then, I load the content for my page two, and now the problem begins:</p>
  
  <pre><code>&lt;script&gt;
    // 2. This code loads the IFrame Player API code asynchronously.
    if (window.YT)
    {
      window.YT = undefined;
    }
  
    var tag = document.createElement('script');
  
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
  
    // 3. This function creates an &lt;iframe&gt; (and YouTube player)
    //    after the API code downloads.
    var player = undefined;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('divVideo', {
        playerapiid: 'anothercode',
        height: '309',
        width: '439',
        videoId: 'anothercode',
        events: {
      'onStateChange': onPlayerStateChange
        }
      });
    }
  
    // 4. The API calls this function when the player's state changes.
    //    The function indicates that when playing a video (state=1),
    //    the player should play for six seconds and then stop.
    function onPlayerStateChange(event) {
      if (event.data == YT.PlayerState.ENDED ) {
       actionToScreen2()
      }
    }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>When the video on my screen2 is finished, onPlayerStateChange is called twice, one calling actionToScreen1 and other actionToScreen2. Looks like I'm just loading the container through ajax, the function is stored somewhat globally, but I can't find where, and can't find a way to differentiate which function is being called. How can I fix this?</p>