Click Loads multiple videos using YOUTUBE Iframe

问题

I have some thumbnails below the main video container. I will like when you click on each thumbnail - the associated video loads and start playing Using the NEW YOUTUBE API IFRAME approach here

Your help or direction will be appreciated

PREVIEW ON JSFIDDLE HERE

PREVIEW LINK UPDATED***

回答1:

See this fiddle: http://jsfiddle.net/Y9j7R/5/

Run this code on load:

var a = document.getElementsByTagName("a");            //1
for(var i=0; i<a.length; i++){                         //2
    if(!/#ytplayer/.test(a[i].href)) continue;         //3
    var link = a[i].innerHTML.match(/\/vi\/([^\/]+)/); //4
    if(link) (function(vidId){                         //5
        a[i].onclick = function(){                     //6
            player.loadVideoById(vidId);               //7
        }                                              //8
    })(link[1]);                                       //9
}

Detailed explanation of the code

Select all <a> (anchor) elements in the document
Loop through these anchors using for. During each iteration, the "current" anchor is referred through a[i].
Check whether the href attribute does not (!) contain "#ytplayer" using the test method of the Regular Expression. If this condition is true (ie: the href attribute does not contain "#ytplayer"), the continue statement terminates the current iteration, and jumps to the next anchor.
The innerHTML property of the current anchor is requested. The match method is used to get the video id. The Regular expression /\/vi\/([^\/]+)/ means: match a substring which equals /vi/<any consecutive non-slash chars>, and group <any consecutive non-slash chars>.
When such a substring is found, the link variable has a property 1 (one), which holds the value of this group. Otherwise, link equals null.
If the link variable is not null, an anonymous function is created (lines 5-9) and executed (line 9). The first argument of the function will be referenced through vidId (variable).
Assigns a newly created function to the onclick property of the current anchor. Assigning a function to the onclick property will cause the onclick event handler to be defined.
Invokes the loadVideoById method of the player object (as defined by the YouTube javascript API).
Invokes the function (created at lines 5-9), passing link[1] as a first parameter.