title: youtube iframe api loadVideoById() error
body: <p>I am adding youtube video to a companies website and would like them to display on non-flash devices. I have been playing with the youtube iframe API and updated one of their examples to allow a user to click on a link to change the video in the iframe. The edited code is:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;div id="player"&gt;&lt;/div&gt;
  &lt;script&gt;
  var tag = document.createElement('script');
  tag.src = "http://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var done = false;
  var player;
  function onYouTubePlayerAPIReady() {
      player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'JW5meKfy3fY',
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
  }
  function onPlayerReady(evt) {
      evt.target.playVideo();
  }
  function onPlayerStateChange(evt) {
      if (evt.data == YT.PlayerState.PLAYING &amp;&amp; !done) {
          setTimeout(stopVideo, 6000);
          done = true;
      }
  }
  function stopVideo() {
      player.stopVideo();
  }
  
  function loadVideo(videoID) {
    if(player) { player.loadVideoById(videoID); }
  }
  
  &lt;/script&gt;
  
  &lt;a href="javascript:loadVideo('kGIjetX6TBk');"&gt;Click me to change video&lt;/a&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The only thing I added was:</p>
  
  <pre><code>function loadVideo(videoID) {
    if(player) { player.loadVideoById(videoID); }
  }
  </code></pre>
  
  <p>This works fine in Safari, Chrome and Firefox but does not work in IE7, 8 or 9. In IE7 and 8 it returns an error "Object does not support this property or method".</p>
  
  <p>Is this an issue with the API or am I doing something wrong?</p>