更新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>，而不仅仅是网址。 而是使用：

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

Answer 2

找出没有任何JavaScript的方法 1.向iframe添加id： 2.而不是span，将标签添加到li，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会自动更新。