What is the most efficient way to download YouTube videos via jQuery when clicking on a user?

Question

I am trying to determine what is the most efficient way to load a video in a user click using jQuery.

To add more context, I will have about 30 clips on YouTube, each of which takes 30-60 seconds, and I would like to dynamically upload them to a div on the right side of the page when a user views topics and potential video clips on the left side.

Right now, I have configured this HTML and jQuery. This works, but I'm curious if there is a better way:

<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 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 the manual coding of .click () for each video, I am considering creating an associative array with the ids-> embed index. Is there a better way to more effectively implement the same functionality?

Thanks in advance for any ideas!

Answer 1

you can add the url of your HREF and get it in a call to 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 2

You can also try changing the jQuery iframe src property.

You may have problems with iframes in Internet Explorer. This page describes the problem: http://osdir.com/ml/youtube-api-gdata/2011-03/msg00369.html
If you can use conditional scripting, which will use flash embedding instead of iframe, if it is in Internet Explorer, this might be the best way to do this.

Answer 3

Use colorbox

Lightweight, customizable lightbox plugin for jQuery 1.3, 1.4 and 1.5
Example