在用户点击时通过jQuery加载YouTube视频的最有效方法是什么? [英] What is the most efficient way to load YouTube videos through jQuery on a user click?

问题描述

我正在尝试确定使用jQuery在用户单击时将视频加载到视频中的最有效方法是什么.

I'm trying to determine what is the most efficient way to load videos into a on a user click using jQuery.

为了提供更多背景信息，我在YouTube上有大约30个剪辑，每个剪辑的时间在30-60秒之间，我想在用户浏览时将其动态加载到页面右侧的div中主题和左侧的潜在视频剪辑.

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.

现在，我已经设置了HTML和jQuery.可以，但是我很好奇是否有更好的方法:

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>

还有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->嵌入代码的关联数组.有没有更好的方法可以更有效地完成相同的功能?

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?

在此先感谢您的见解！

推荐答案

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

you can add the URL to your Href and get it in the call Something Like:

在您的HTML中:

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

现在在您的JQuery中:

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

这篇关于在用户点击时通过jQuery加载YouTube视频的最有效方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！