如何在單擊鏈接時將視頻加載到單獨的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>'); 

})