Event loads with jQuery and YouTube API

Question

When I put the callback for when the YouTube video has loaded, onYouTubePlayerReady, inside the jQuery ready function it is not called when the video is loaded. However, when I put the callback outside the jQuery ready function it is called. How can I fix it so that I can put the callback in the jQuery function. Code below.

<html>
<body>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}swfobject.js"></script>    

<script type="text/javascript">

  /// --> When I put onYouTubePlayerReady here it IS called  //
  function onYouTubePlayerReady(playerId) {
      ytplayer = document.getElementById("myytplayer");
      ytplayer.playVideo();
  }

  $(document).ready(function(){
      
       /// --> When I put onYouTubePlayerReady here it is NOT called //

       var params = { allowScriptAccess: "always" };
       var atts = { id: "myytplayer" };
       swfobject.embedSWF("http://www.youtube.com/v/UkhisRY3RRQ?version=3&enablejsapi=1","ytapiplayer", "800", "500", "8", null, null, params, atts);
});

</script>

   <div id="ytapiplayer">
       You need Flash player 8+ and JavaScript enabled to view this video.
   </div>
</body>
</html>

Also, here is the url for swfobject, http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js in case it helps.

webnesto · Accepted Answer · 2012-04-15 01:02:18Z

2

You have to have it globally available - if you put it inside your ready handler, it's scoped to that handler. Why do you need it there? You need access to the scope? You could try this, I'm not sure if it will work for you though - it depends on when the youtubeplayer reference pointer association is established:

<html>
<body>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}swfobject.js"></script>    

<script type="text/javascript">

  $(document).ready(function(){

      onYouTubePlayerReady = function(playerId) {
          ytplayer = document.getElementById("myytplayer");
          ytplayer.playVideo();
      }

       var params = { allowScriptAccess: "always" };
       var atts = { id: "myytplayer" };
       swfobject.embedSWF("http://www.youtube.com/v/UkhisRY3RRQ?version=3&enablejsapi=1","ytapiplayer", "800", "500", "8", null, null, params, atts);
});

</script>

   <div id="ytapiplayer">
       You need Flash player 8+ and JavaScript enabled to view this video.
   </div>
</body>
</html>

answered Apr 15, 2012 at 1:02

webnesto

1,3188 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alexis Over a year ago

worked! I want the onYouTubePlayerReady to be in the ready so I can do jQuery stuff from inside it. I'm curious as to why it worked. What do you mean by "it depends on when the youtubeplayer reference pointer association is established"

webnesto Over a year ago

It worked because we assigned the function to a global variable "onYouTubePlayerReady" - the global var that YT API is hooking into. (before you had a private function nothing outside your ready handler could target). - I was worried that YT API might set the pointer to the global "onYouTubPlayerReady" variable before we assigned it and that might've had issues. Glad it worked.

Rob W Over a year ago

Either use window.onYouTubePlayerReady = ..., or add var onYouTubePlayerReader; outside the $().ready handler. Otherwise, you're assigning a value to an undeclared global variable. This feature is so bad that it's forbidden in strict mode (see here: jsfiddle.net/WNtmV).

Collectives™ on Stack Overflow

Event loads with jQuery and YouTube API

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related