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 on YouTube that are each between 30-60seconds and I'd like to dynamically load them into a div on the right hand side of the page as the user browses the topics and potential video clips on the left hand side.

Right now, I've setup this HTML and jQuery. It works but I'm curious if there is a better method:

<div class="wrapper">
    <div class="details_left">
        <div class="cluster">
            <a href="#" id="johnk" class="vid_trigger"><div class="title">The importance of demonstrating intellectual curiosity</div></a>
            <div class="role">John K: Summer Consultant, BCG</div>
            <div class="summary">Discussion on how curiousity is important to show in interviews because it leads to better answers on the job</div>
        </div>
    </div>
    <div class="details_right" id="video_container">
        video
    </div>   
</div>

And the jQuery:

$('#johnk').click( function(){
    $('#video_container').html('<iframe width="425" height="349" src="http://www.youtube.com/embed/bMvRdr-mUOU?rel=0" frameborder="0" allowfullscreen </iframe>');
})

To reduce hand coding a .click() for each video I am considering creating an associative array that has the ids-> embed code. Is there a better way to accomplish the same functionality more efficiently?

Thanks in advance for any insights!

Solution 1

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;
});

Solution 2

Use Colorbox

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

Solution 3

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.

Comments

[john k]

Cool! That's a good solution, thanks for helping out. I appreciate it.

[john k]

Only thing I should add is that there is a "." missing in line 2. It should be $('.vid_trigger').click (function (e) {

[Danny Englander]

Great stuff, I was looking to do something like this without too much overhead and this is simple and elegant. Thanks.