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

Question

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

我在想形式，但这不是一个好主意。而且我对JavaScript或JQuery没有什么了解，所以一些解决方案，提供了解释如何使用，将会非常有用。

Answer 1

点击视频网址，首先如果它的锚点，使用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>'); 

})