0

我正在尝试使用 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 上播放不同的剪辑。

任何想法，这里有什么问题，或者如何做到这一点？

4

2 回答 2

3

在 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);
});
于 2013-02-18T20:00:38.740 回答
0

想办法在没有任何 JavaScript 的情况下做到这一点 1. 将 id 添加到 iframe：2. 将标签添加到 li，而不是 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 会自动更新。

于 2013-02-18T20:09:04.253 回答