更新YouTube的iframe

Question

我想動態更新使用jQuery的Youtube iframe的src屬性。 這裏是我的HTML：

<iframe width="480" height="360" src="" frameborder="0" allowfullscreen></iframe> 


<ul>   
<li>Reading comprehension. <span> 
http://www.youtube.com/embed/O9AuuYOdCGc?rel=0</span> 
</li> 
</ul> 

和JavaScript

$('.manipulated li').click(function(e) { 
    var source = $(this).children('span').html(); 
    $('iframe').attr('src',source); 
}); 

的目標是，在我點擊李項，iframe的來源將被更新，用戶將在扮演不同的剪輯相同的iframe。

任何想法，這裏有什麼問題，或者如何做到這一點？

Answer 1

在JQuery中，當您使用.html();時，它包含標籤。在這種情況下，您將iframe的來源設置爲<span>http://www.youtube.com/embed/O9AuuYOdCGc?rel=0</span>，而不僅僅是url。 而是使用：

$('.manipulated li').click(function(e) { 
    var source = $(this).children('span').text(); 
    $('iframe').attr('src',source); 
}); 

Answer 2

想通了做沒有任何JavaScript 1.增加號碼至iframe的方式： 2.代替跨度，加標籤裏，用href屬性等於Youtube鏈接 3 。target tag to a iframe

<iframe name="testClip" id="testClip" width="480" height="360" src="http://www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe> 

<ul> 
<li> 
<a href="http://www.youtube.com/embed/O9AuuYOdCGc?rel=0" target="testClip">Reading comprehension.</a> 
</li> 
</ul> 

在這種情況下iframe會自動更新。