My base Html
<div class="ytplayer" id="player1" data-videoid="xxxxxxx" data-playerheight="390" data-playerwidth="640"></div>
<div class="ytplayer" id="player2" data-videoid="xxxxxxx" data-playerheight="390" data-playerwidth="640"></div>
<div class="ytplayer" id="player3" data-videoid="xxxxxxx" data-playerheight="390" data-playerwidth="640"></div>
My script initialization is
$(document).ready(function(){
$(".ytplayer")._loadIFramePlayer();
});
my functions look like
_loadIFramePlayer: function(){
$("<script>")
.attr("src", "//www.youtube.com/iframe_api")
.insertBefore($("body").find("script").first());
var _youtubePlayer = null;
if (typeof (YT) === 'undefined' || typeof (YT.Player) === 'undefined') {
window.onYouTubeIframeAPIReady = function () {
_youtubePlayer = new YT.Player("player", {
height: "390",
width: "640",
videoId: "xxxxxx",
events: {
// i didn't mention the below functions since I am not doing any thing there, just calling stopVideo and playVideo native functions of youtube api.
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
};
$.getScript('//www.youtube.com/iframe_api');
} else {
_youtubePlayer = new YT.Player("player", {
height: "390",
width: "640",
videoId: "xxxxxx",
events: {
// i didn't mention the below functions since I am not doing any thing there, just calling stopVideo and playVideo native functions of youtube api.
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
}
Ideally we should get three instances of iframe player but in our case we are getting only one player that too the last one in all cases. Please let me know if any work around for this ..
