jquery - 在用户点击时通过 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-> 嵌入代码的关联数组。是否有更好的方法来更高效地完成相同的功能？

提前感谢您的任何见解!

Answer 1

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

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