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

目标是在我点击li项目后，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.将id添加到iframe：2.将标记添加到li，而不是span，href属性等于youtube链接3.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会自动更新。