I want to call onYouTubeIframeAPIReady
function but this is not firing. I am getting only frameID
in console but other functions are not getting called.
JavaScript
x
28
28
1
$(document).ready(function(){
2
var player;
3
var ytsrc = $('.video_holder_frame').find('iframe').attr('src');
4
if (ytsrc) ytsrc = ytsrc.match(/youtube.com/embed/([^\?]*)/i);
5
if (!ytsrc) return;
6
var frameID = 'youtube_' + ytsrc[1];
7
console.log(frameID);
8
$('.video_holder_frame').find('iframe').attr('id', frameID);
9
10
function attachToYoutubeFrame() {
11
console.log("attachToYoutubeFrame");
12
function onytplayerStateChange(newState) {
13
console.log("onytplayerStateChange");
14
console.log(newState);
15
};
16
17
player = new YT.Player(frameID, {
18
events: {
19
"onStateChange": onytplayerStateChange
20
}
21
});
22
};
23
24
function onYouTubeIframeAPIReady() {
25
attachToYoutubeFrame();
26
};
27
});
28
Advertisement
Answer
Your onYouTubeIframeAPIReady() function must be defined globaly. Simply replace the line
JavaScript
1
2
1
function onYouTubeIframeAPIReady() {
2
with
JavaScript
1
2
1
window.onYouTubeIframeAPIReady = function() {
2
It is also important to load the youtube iframe api library file:
JavaScript
1
2
1
<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
2
Also your iframe src url must have appended the enablejsapi=1 parameter:
JavaScript
1
2
1
http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1
2