在用户点击中通过jQuery加载YouTube视频的最有效方法是什么？

我正在尝试确定使用jQuery将视频加载到用户点击的最有效方法.

为了给出更多背景信息,我将在YouTube上有大约30个片段,每个片段在30-60秒之间,我想在用户浏览主题时动态将它们加载到页面右侧的div中.左侧有潜在的视频片段.

现在,我已经设置了这个HTML和jQuery.它有效,但我很好奇是否有更好的方法：

<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>

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

为了减少每个视频的手动编码.click()我正在考虑创建一个具有ids->的关联数组.嵌入代码.有没有更好的方法来更有效地完成相同的功能？

提前感谢任何见解！

解决方法

您可以将URL添加到您的Href并在调用中获取它：

在您的HTML中：

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

现在在你的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;
});