"ytplayer is not defined" on using the SWFObject method to include a chromeless Youtube video on a site

Question

Code is as follows but I get a "ytplayer is not defined" error. Is this an issue with

<script src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
<script>
  google.load("swfobject", "2.1");
</script>

<script type="text/javascript">

        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();
          }
        }


    </script>

and its inserted here

<div id="ytapiplayer">

</div>
<script type="text/javascript">
      // <![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();
//]]>
    </script>

onYouTubePlayerReady works and alert(ytplayer); within this function returns an object, however calling alert(ytplayer); within loadNewVideo returns null.

This is copied directly from http://code.google.com/apis/youtube/chromeless_example_1.html where it works fine. Any ideas where I'm going wrong? Is it to do with calling getElementById on an object?

Answer 1

Found the problem.

loadNewVideo('11mrMppgfrQ','0');
      play();

were calling before

function onYouTubePlayerReady(playerId) {
      ytplayer = document.getElementById("myytplayer");
      ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
      ytplayer.addEventListener("onError", "onPlayerError");
    }

Moving them within the function to after this line

ytplayer = document.getElementById("myytplayer");

fixed the issue

final code looks like this:

function onYouTubePlayerReady(playerId) { 
    ytplayer = document.getElementById("myytplayer");
    ytplayer.addEventListener("onStateChange", "onytplayerStateChange"); 
    ytplayer.addEventListener("onError", "onPlayerError"); 
    loadNewVideo('11mrMppgfrQ','0'); 
    play(); 
}

Answer 2

Soory I didn't understand what you did, could you give code?