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!

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