Click Loads multiple videos using YOUTUBE Iframe

Question

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 IFRA

Answer 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

1. Select all <a> (anchor) elements in the document
2. Loop through these anchors using for. During each iteration, the "current" anchor is referred through a[i].
3. 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.
4. 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.
5. 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).
6. 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.
7. Invokes the loadVideoById method of the player object (as defined by the YouTube javascript API).
8.  
9. Invokes the function (created at lines 5-9), passing link[1] as a first parameter.

References

• for loops and the continue statement
• Creating and calling functions in JavaScript
• Regular Expressions (RegExp).
• test method of the RegExp object
• The match function in conjunction with a Regular expression
• The innerHTML property of an element
• The onclick event handler
• The loadVideoById method of the YouTube JavaScript API

Another interesting answer

• YouTube iframe API: how do I control a iframe player that's already in the HTML?