更新 Youtube iframe答案

【问题标题】：Update Youtube iframe更新 Youtube iframe
【发布时间】：2013-02-03 08:26:57
【问题描述】：

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

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

【问题讨论】：

你试过document.getElementById['iframeID'].src = newSource;吗？

标签： jquery iframe youtube youtube-api youtube-javascript-api

【解决方案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);
});

【讨论】：

【解决方案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 会自动更新。

【讨论】：