javascript - 使用 jQuery 更改 YouTube iframe src

Question

我正在尝试使用 jQuery 更改 YouTube 视频 iframe 源，但看起来遇到了跨源问题。我的 jquery 代码:

var videourl = $(".videourl").html();
$(".actualyoutube iframe").attr('src',videourl);

iframe 获取新的 src 值，但没有显示视频。有什么想法吗？

扩展说明:

有一个带有嵌入 youtube 视频的弹出式 div

<div class="youtubepopup">
    <div class="closeyoutube">X</div>
    <div class="actualyoutube">
        <iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

有一个 td 包含一个新的 src url。除了这个 td 之外，没有其他地方或方法可以获取此 url。

<td class="videourl">//youtube.com/whatevervideo</td>

还有一个脚本应该在打开的弹出窗口中添加 src 并在关闭时删除。

var videourl = $(".videourl").html();
$(".youtubecap").click(function() {
  $(".actualyoutube iframe").attr('src', videourl);
  $(".youtubepopup").fadeIn('slow');
});
$(".closeyoutube").click(function() {
  $(".youtubepopup").fadeOut('slow');
  $(".actualyoutube iframe").removeAttr('src');
});
$(".youtubepopup").click(function() {
  $(".youtubepopup").fadeOut('slow');
});

附注现在我已经列出来了，user3385530 可能是正确的

Answer 1

您无法在 iframe 中显示来自 www.youtube.com 的页面。正确的方法是在您的网页中使用他们的视频嵌入代码。 IFrame 嵌入更容易，您需要在 iframe 中显示的 URL 如下所示:

http://www.youtube.com/embed/VIDEO_ID_GOES_HERE

只需在您的网页中放置一个像这样的 iframe:

<div class="actualyoutube">
  <iframe width="560" height="315" src="http://www.youtube.com/embed/VIDEO_ID_GOES_HERE" frameborder="0" allowfullscreen></iframe>
</div>

最后，假设您能够使用 jQuery 从 URL 中提取视频 ID，您可以使用它来显示视频*:

var videoid = "S2ISrpNM-0s";
$(".actualyoutube iframe").remove();
$('<iframe width="420" height="315" frameborder="0" allowfullscreen></iframe>')
    .attr("src", "http://www.youtube.com/embed/" + videoid)
    .appendTo(".actualyoutube");

^{* 更改已显示 YouTube 视频的 iframe 的 src 属性无效；因此，我建议使用 destroy-iframe-recreate-iframe 方法。}