title: "ytplayer is not defined" on using the SWFObject method to include a chromeless Youtube video on a site
body: <p>Code is as follows but I get a "ytplayer is not defined" error. Is this an issue with </p>
  
  <pre><code>&lt;script src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
  &lt;script&gt;
    google.load("swfobject", "2.1");
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
          function updateHTML(elmId, value) {
            document.getElementById(elmId).innerHTML = value;
          }
  
          function setytplayerState(newState) {
            updateHTML("playerstate", newState);
          }
  
          function onYouTubePlayerReady(playerId) {
            ytplayer = document.getElementById("myytplayer");
            ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
            ytplayer.addEventListener("onError", "onPlayerError");
          }
  
          function onytplayerStateChange(newState) {
            setytplayerState(newState);
          }
  
          function onPlayerError(errorCode) {
            alert("An error occured: " + errorCode);
          }
  
          // functions for the api calls
          function loadNewVideo(id, startSeconds) {
            if (ytplayer) {
              ytplayer.loadVideoById(id, parseInt(startSeconds));
            }
          }
  
          function play() {
            if (ytplayer) {
              ytplayer.playVideo();
            }
          }
  
  
      &lt;/script&gt;
  </code></pre>
  
  <p>and its inserted here</p>
  
  <pre><code>&lt;div id="ytapiplayer"&gt;
  
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
        // &lt;![CDATA[
  
        // allowScriptAccess must be set to allow the Javascript from one 
        // domain to access the swf on the youtube domain
        var params = { allowScriptAccess: "always", wmode: "transparent", menu: "false"  };
        // this sets the id of the object or embed tag to 'myytplayer'.
        // You then use this id to access the swf and make calls to the player's API
        var atts = { id: "myytplayer" };
        swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&amp;playerapiid=ytplayer", 
                           "ytapiplayer", "100%", "100%", "8", null, null, params, atts);
        loadNewVideo('11mrMppgfrQ','0');
        play();
  //]]&gt;
      &lt;/script&gt;
  </code></pre>
  
  <p>onYouTubePlayerReady works and <code>alert(ytplayer);</code> within this function returns an object, however calling <code>alert(ytplayer);</code> within loadNewVideo returns null.</p>
  
  <p>This is copied directly from <a href="http://code.google.com/apis/youtube/chromeless_example_1.html" rel="nofollow noreferrer">http://code.google.com/apis/youtube/chromeless_example_1.html</a> where it works fine. Any ideas where I'm going wrong? Is it to do with calling getElementById on an object?</p>