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

Question

我正在尝试确定使用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-> embed代码的关联数组.有没有更好的方法来更有效地完成相同的功能？

提前感谢任何见解!

Answer 1

您可以将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;
});