javascript - 单击链接时如何将视频加载到单独的div中

Question

我有这 2 个 div - 一个包含菜单，其中列表的每个元素都是视频的链接，我希望将相应的视频加载到第一个旁边的 div 中。

我在考虑表格，但这不是一个好主意。而且我对 JavaScript 或 JQuery 一无所知，所以一些解决方案，提供了如何使用的解释，将非常有帮助。

Answer 1

单击视频 URL 时，首先如果它是一个锚点，则使用 preventDefault 并阻止单击行为，然后在该元素上绑定您自己的 onclick 事件。

单击该元素实际上应该使用下一个 div 的 id，并且能够以您想要的任何方式在该 div 中播放您的视频。

Answer 2

像这样的东西应该工作：

HTML：

<a href="javascript:;" class="link">http://youtu.be/Etst4t3ES8Y</a><br/>
<a href="javascript:;" class="link">http://youtu.be/Etst4t3ES8Y</a><br/>
<a href="javascript:;" class="link">http://youtu.be/Etst4t3ES8Y</a><br/>
<br/>
<div id="videoDiv"></div>

jQuery :

$('.link').click(function(event){
    event.preventDefault();
    var url =$(this).html();
    $("#videoDiv").html('<iframe width="400" height="400" src="'+url+'?wmode=transparent" frameborder="0" allowfullscreen></iframe>');

})