loadVideoById() bug

<!DOCTYPE html>
<html>
  <body>
    <div id="player"></div>
    <br/>
    <ul>
      <li><a href="#" onclick="loadVideoById('tu0qtEwb9gE', 0, 5)">loadVideoById('tu0qtEwb9gE', 0, 5)</a></li>
      <li><a href="#" onclick="loadVideoById('tu0qtEwb9gE', 10, 25)">loadVideoById('tu0qtEwb9gE', 10, 25)</a></li>
    </ul>
    <p id="event">
      
    </p>
    <p>
      This is a simple hack, which almost does the same as loadVideoById({..., 'startSeconds': startSeconds, 'endSeconds': endSeconds, ...}).<br />
      This hack adds two event listeners to the player: onCueRangeEnter and onCueRangeExit. When the loadVideoById is called instead of specifying startSeconds and endSeconds it calls the function player.addCueRange(name, startSeconds, endSeconds).
      The name specified is an unique name, which is used to identify the range for when onCueRangeEnter or onCueRangeExit are fired. After the range is added it will load the video and seek to the startSeconds. When onCueRangeExit event is fired it will check if the unique name is correct and thereafter player.stopVideo() is called.<br />
      This is basically what this hack does.
    </p>
    <p><strong>Bug description:</strong> clicking the above links back and forth should load and end the video at their respective times (0s/5s and 10s/25s). Unfortunately, once you load the video for the first time, the 
      properties of that video will get "cached", so loading the same video but with different start/end times will not yield the desired result and will instead keep loading with the start/end times of the first loaded video.
    </p>
    <p>Issue in full described <a href="https://code.google.com/p/gdata-issues/issues/detail?id=5010">here on gdata-issues</a>.</p>

    <script>
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player, cueRangeIndex = 0, cueRangeStart = null, inCueRange = false;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'tu0qtEwb9gE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      function onPlayerReady(event) {
        event.target.playVideo();
        player.addEventListener("onCueRangeEnter", onCueRangeEnter);
        player.addEventListener("onCueRangeExit", onCueRangeExit);
      }

      function onPlayerStateChange(event) {
        console.log(event);
        if (event.data === 1 && cueRangeStart !== null && !inCueRange)
          event.target.seekTo(cueRangeStart);
      }

      function stopVideo() {
        player.stopVideo();
      }
      
      function onCueRangeEnter(event) {
        console.log("onCueRangeEnter", event);
        document.getElementById("event").textContent = "Entered Cue Range -> " + event.data + " -> " + event.target.getCurrentTime();
        if (event.data === "range" + cueRangeIndex)
          inCueRange = true;
      }
      
      function onCueRangeExit(event) {
        console.log("onCueRangeExit", event);
        document.getElementById("event").textContent = "Exited Cue Range -> " + event.data + " -> " + event.target.getCurrentTime();
        if (event.data === "range" + cueRangeIndex)
          player.stopVideo();
        if (event.data === "range" + cueRangeIndex)
          inCueRange = false;
      }
      
      function addCueRange(name, start, end) {
        player.addCueRange(name, start, end);
      }
      
      function removeCueRange(name, start, end) {
        player.removeCueRange(name, start, end);
      }

      function loadVideoById(videoId, startSeconds, endSeconds) {
        cueRangeStart = startSeconds;
        inCueRange = false;
        document.getElementById("event").textContent = "";
        removeCueRange("range" + cueRangeIndex, startSeconds, endSeconds);
        player.loadVideoById({'videoId': videoId, 'suggestedQuality': 'large'});
        cueRangeIndex++;
        addCueRange("range" + cueRangeIndex, startSeconds, endSeconds);
        player.playVideoAt(startSeconds);
        player.seekTo(startSeconds);
      }
    </script>
  </body>
</html>

// Code goes here

/* Styles go here */