EDIT - 2016-06-25
(I removed my update on June 16th, as it no longer matters.
I left my OP below ...)
Today I spent another 4 hours. Here is the situation now:
My JOB function for two links.
Video parameters are defined in the array. Two other links do not work.
I get Uncaught TypeError: thisPlayer.loadVideoById is not a function for links # 3 and # 4.
BUT THE SAME WORKING function works well for links # 1 and # 2.
It seems that youtube objects are defined only for the first two.
Why?
Please read the console carefully at this direct link:
https://www.bessetteweb.com/?p=youtube-video-test
I inserted LOT from console.log messagess to make it clear.
Here is my actual code:
// Global variable for the player var player = []; var statePlaying=false; playerArr = [{ linkID:"link0", divID:"player1", ytID:"5V_wKuw2mvI", // Heavy metal playlist start:20, end:30 }, { linkID:"link1", divID:"player2", ytID:"u9Dg-g7t2l4", // Disturbed start:10, end:20 }, { linkID:"link2", divID:"player3", ytID:"39b5v3-d6ZA", // Maiden start:30, end:40 }, { linkID:"link3", divID:"player4", ytID:"z8ZqFlw6hYg", // Slayer start:120, end:136 }]; // This function gets called when API is ready to use function onYouTubePlayerAPIReady() { // Binding events loop console.log("playerArr.length: "+playerArr.length); for(i=0;i<playerArr.length;i++){ console.log(""); console.log("onPlayerReady for loop ->i: "+i); var playButton = document.getElementById(playerArr[i].linkID); console.log("playButton.id: "+playButton.id); var thisArr = playerArr[i]; console.log("playerArr[i] object (below): "); console.log(thisArr); playButton.addEventListener("click", function() { thisLinkID = $(this).attr("id").replace("link",""); console.log(""); console.log("------------------"); console.log("Link #"+(parseInt(thisLinkID)+1)+" clicked."); console.log("------------------"); var ytID = playerArr[thisLinkID].ytID; var start = playerArr[thisLinkID].start; var end = playerArr[thisLinkID].end; var thisPlayer = new YT.Player(playerArr[thisLinkID].divID); console.log("ytID: "+ytID); console.log("start: "+start); console.log("end: "+end); console.log(""); console.log("Below are the google ads, blocked by AdBlocker."); $("#ytplayerModal").css({"display":"block"}); $("#ytplayerModal").animate({"opacity":"0.7"},1000,function(){ console.log(""); console.log("player show()"); $(".ytplayer").show(); console.log("Youtube player object:"); console.log(thisPlayer); console.log(""); console.log('loadVideoById() parameters --\> videoId:'+ytID+', startSeconds:'+start+', endSeconds:'+end); thisPlayer.loadVideoById({'videoId':ytID, 'startSeconds':start, 'endSeconds':end}); console.log(""); }); // Bugfix - Set Interval instead of listener setTimeout(function(){ var IntervalCounter=0; listenerInterval = setInterval( function() { var state = thisPlayer.getPlayerState(); //player[thisLinkID].getPlayerState(); var stateMsg; switch (state){ case -1: stateMsg="unstarted"; thisPlayer.playVideo(); console.log("player["+thisLinkID+"]"); break; case 0: stateMsg="ended"; break; case 1: stateMsg="playing"; break; case 2: stateMsg="paused"; break; case 3: stateMsg="buffering"; break; case 5: stateMsg="video cued"; break; default: stateMsg="Undefined player state..."; } console.log(state+" : "+stateMsg); if(state==1){ statePlaying=true; } // Closes the modal if((statePlaying) && (state==0)){ //if((statePlaying) && (stateObj.data==0)){ setTimeout(function(){ console.log("Closing Modal"); $(".ytplayer").css({"display":"none"}); $("#ytplayerModal").animate({"opacity":"0"},1000,function(){ $("#ytplayerModal").css({"display":"none"}); }); statePlaying=false; },500); clearInterval(listenerInterval); console.log("Interval loop stopped on video end.") } // Stop the interval at 1000... Endless instead! IntervalCounter++; if((IntervalCounter>999)&&(state!=1)&&(state!=2)&&(state!=0)){ clearInterval(listenerInterval); console.log("Interval loop willingly stopped. Endless otherwise.") } }, 10); },1100); // Interval setTimeout }); } } // Inject YouTube API script var tag = document.createElement('script'); tag.src = "//www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
Here is a snapshot of my console log: 
-----------------
Here is my original post - June 14th:
I have spent 6 hours on this already.
(plus 1 edit for this question!)
I am partially debugging the last 4 lines.
The problem is that I do not see the console error as a hint.
Concept:
I want to associate numerous Youtube videos with text links.
The desired effect for the user is to be able to click on the quote link while reading the text ... To be able to confirm the quote.
Video should NOT play in full.
The video should start with a specific time code and end with a specific time code.
Bonus difficulty: All this needs to be shown in a modal look style.
My WORKED code is pretty fast for ONE videos. See here .
I based my code on this tutorial and quickly succeeded.
Then, having this job ...
I needed to create arrays to handle multiple videos.
Link identifiers, player identifiers, time codes for the beginning and the end ... AND LIST! The beginning of entertainment!
As said, I spent most of my time on this. I have always encountered errors with console errors as clear (LOLLL) manuals.
I am pleased with my work ... This is happening in the right direction, I think. It almost works ...
But this time there are no errors! See here . (check the console!)
WHATT !!! NO ERROR?!?
Now my hands are hacked. Actually, the first show, but the video does not start ... And the second looks completely lost in the haze.
In console log messages, I see the 1st filling of the onStateChange , which is -1 (Unstarted). But after??? He is dying!
Arrgg!
I must surpass my pride ... And bring it as a question about StackOveflow.
;)
My complete code (for multiple links):
This is a page called via ajax ... So, all external resources like jQuery are already loaded.
<style> .ytplayer{ position:fixed; z-index:2; width:60%; height:40%; top:30%; left:20%; display:none; } #ytplayerModal{ display:none; background-color:#000; opacity:0; position:fixed; z-index:1; top:0; left:0; width:100%; height:100%; } .ytTriggerPlay{ text-decoration:underline; color:dodgerblue; cursor:pointer; } </style> <h1>Youtube modal trigger link test</h1> <br> <br> <div id="text"> Lorem ipsum dolor sit amet, consectetur <a id="0" class="ytTriggerPlay">adipiscing elit</a>. Quisque feugiat lectus ut est vestibulum ornare. Vivamus felis nulla, facilisis id cursus non, pharetra non diam. Sed pellentesque turpis vel sem tincidunt consectetur. Aenean ut lorem erat. Donec ut tellus sed leo ultrices cursus. <a id="1" class="ytTriggerPlay">Cras varius libero</a> ut purus suscipit ultrices. Vivamus eget efficitur turpis. Aenean suscipit, dui nec luctus fringilla, neque tellus fringilla risus, et porta enim justo et turpis. Sed risus orci, vehicula sed eleifend eget, tincidunt ut turpis. Vestibulum in sapien non lacus tristique mattis id eget tortor.<br> <br> Proin est purus, maximus id nunc vel, consectetur tristique urna. Mauris cursus ipsum a varius luctus. Nunc interdum condimentum massa vitae rutrum. Morbi volutpat nec lorem eleifend malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis fringilla metus vel nunc elementum efficitur. Duis sed dolor diam. In eu ultrices libero, eget lobortis mi. Sed pretium orci non augue vehicula, eget placerat leo lacinia. Sed sed gravida dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In bibendum, erat eget venenatis elementum, nulla enim posuere lacus, quis efficitur dolor ex quis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus volutpat finibus odio id venenatis. Fusce at leo libero. Cras eget velit sed justo egestas vehicula efficitur sit amet ex.<br> </div> <div id="ytplayerModal"></div> <div id="player1" class="ytplayer"></div> <div id="player2" class="ytplayer"></div> <script> </script>