CODEWITHSUNDEEP
javascriptjqueryyoutube-api
Telion
Telion

Reputation: 777

Cannot read property 'apply' of undefined - Youtube Api

I created the following code to make videos play on hover:

var player = [];
var el_number;
function onYouTubePlayerAPIReady() {
	var players = $(".video");
	for (var i = 0; i < players.length; i++) {
		el_number = $(players[i]).parent().parent().index();
		player[i] = new YT.Player(players[i], {
			events: {
				'onReady': onPlayerReady(i, el_number)
			}
		});
	}
}
function onPlayerReady(number, elnumber) {
	$(".article:eq("+elnumber+")").on({
		'mouseover': function() {
		player[number].playVideo();
		},
		'mouseout': function() {
		player[number].pauseVideo();
		}
	});
}
<script src="https://www.youtube.com/iframe_api"></script>
<!-- Videos look like this: -->
<iframe class='video' src='https://www.youtube.com/embed/(video_id)?controls=0&showinfo=0&disablekb=1&fs=0&iv_load_policy=3&&enablejsapi=1' frameborder='0' allowfullscreen></iframe>

It works perfectly fine, but after some time of loading scripts it shows me this error in the console:

Uncaught TypeError: Cannot read property 'apply' of undefined          www-widgetapi.js:65 
    at K.g.I (www-widgetapi.js:65)
    at W.g.l (www-widgetapi.js:114)
    at W.g.J (www-widgetapi.js:127)
    at S.g (www-widgetapi.js:143)
    at k (www-widgetapi.js:95)

I ckecked Opera and Edge there is no error. After disabling every extention there is still that problem in Chrome. What is the root of the problem here?

Upvotes: 3

Views: 3611

Answers (1)

Bertrand Martel
Bertrand Martel

Reputation: 45513

I think it's an issue with your callback definition : 

onPlayerReady(i, el_number)

onPlayerReady takes the event data as parameter. To get the player, you can call event.target and store some data inside this object

For instance :

var player = [];

function onYouTubePlayerAPIReady() {
  var players = $(".video");
  for (var i = 0; i < players.length; i++) {
    el_number = $(players[i]).parent().parent().index();
    player[i] = new YT.Player(players[i], {
      events: {
        'onReady': onPlayerReady
      }
    });
    player[i].el_number = el_number;
  }
}

function onPlayerReady(event) {
  console.log("event.target.el_number : " + event.target.el_number);
  $(".article:eq(" + event.target.el_number + ")").on({
    'mouseover': function() {
      event.target.playVideo();
    },
    'mouseout': function() {
      event.target.pauseVideo();
    }
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<!-- Videos look like this: -->
<iframe class='video' src='https://www.youtube.com/embed/B_hLfhccYf0?controls=0&showinfo=0&disablekb=1&fs=0&iv_load_policy=3&enablejsapi=1' frameborder='0' allowfullscreen></iframe>

You can find a jsfiddle here

Upvotes: 3

Related Questions