使用 jQuery 更改 YouTube iframe src [英] Change YouTube iframe src with jQuery

问题描述

我正在尝试使用 jQuery 更改 YouTube 视频 iframe 源，但似乎遇到了跨源问题.我的jQuery代码:

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

iframe 获得新的 src 值，但不显示视频.有什么想法吗?

扩展说明:

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

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

有一个特定的 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 可能是对的

解决方案

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

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

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

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

最后，假设您能够使用 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 方法.}

I am trying to change a YouTube video iframe source with jQuery, but looks like running into cross origin issue. My jquery code:

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

iframe gets new src value, but no video is displayed. Any ideas?

extended explanation:

There is a popup div with embeded youtube video

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

There is a certain td which contains a new src url. There is no other place or way to get this url except from this td.

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

And there is a script that should add src on open popup and remove on closing.

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

p.s. now that i laid it out, user3385530 is probably right

解决方案

You cannot show pages from www.youtube.com inside an iframe. The correct way is to use their video embed codes inside your web page. IFrame embeds are easier, the URL you need to display in an iframe looks like this:

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

Just place an iframe such as this inside your web page:

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

Finally, assuming you are able to extract video id from the URLs using jQuery, you can use this to display videos*:

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");

^{* Changing the src property of an iframe that is already displaying a YouTube video did not work; I therefore suggest destroy-iframe-recreate-iframe approach.}

这篇关于使用 jQuery 更改 YouTube iframe src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！