What is the most efficient way to load YouTube videos through jQuery on a user click?

Question

I\'m trying to determine what is the most efficient way to load videos into a on a user click using jQuery.

To give more context behind this, I\'ll have about 30 clips

Answer 1

You could also try to have jQuery change the iframe src property.

You might run into trouble with the iframe in Internet Explorer. This page describes the problem: http://osdir.com/ml/youtube-api-gdata/2011-03/msg00369.html
If you can put in conditional scripting that will use the flash embed instead of the iframe if it is in Internet Explorer, that might be the best way to do it.

Answer 2

you can add the URL to your Href and get it in the call Something Like:

In your HTML:

<a href="bMvRdr-mUOU" id="johnk" class="vid_trigger">

Now in your JQuery:

$('.vid_trigger').click( function(e){
e.preventDefault();
var URL = $(this).attr('href');
var htm = '<iframe width="425" height="349" src="http://www.youtube.com/embed/' + URL + '?rel=0" frameborder="0" allowfullscreen ></iframe>';

    $('#video_container').html(htm);

return false;
});

Answer 3

Use Colorbox

A light-weight, customizable lightbox plugin for jQuery 1.3, 1.4, and 1.5
Sample