使用 jQuery 更改 YouTube iframe src答案

【问题标题】：Change YouTube iframe src with jQuery使用 jQuery 更改 YouTube iframe src
【发布时间】：2014-11-03 21:38:40
【问题描述】：

我正在尝试使用 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 可能是对的

【问题讨论】：

控制台出错？是videourl 嵌入网址版本吗？您应该在线提供简约示例以复制您的问题
拒绝在框架中显示“youtube.com/watch?v=S2ISrpNM-0s”，因为它将“X-Frame-Options”设置为“SAMEORIGIN”
所以使用嵌入 URL 版本设置 src //www.youtube.com/embed/S2ISrpNM-0s
这就是我使用的，但由于某些原因，我需要从 div 中提取目的地。
你不能提供你在说什么的具体样本吗？！ Youtube 不允许您在 iframe 中显示自己的页面，这就是您需要使用嵌入 URL 的原因。而且我不明白为什么这与任何 DIV 相关。如果您的用户正在传递 youtube URL，那么您需要使用正则表达式或任何字符串替换方法将它们解析为嵌入版本，或者可能开始使用 youtube API

标签： javascript jquery html

【解决方案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 方法。}

【讨论】：

same 拒绝在框架中显示“youtube.com/watch?v=S2ISrpNM-0s”，因为它将“X-Frame-Options”设置为“SAMEORIGIN”。

【解决方案2】：

<div class="service-video-media">
<iframe id="main-play" width="560" height="315" src="https://www.youtube.com/embed/uTcj2v85y34" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<div class="video-list">
<img src="https://img.youtube.com/vi/uTcj2v85y34/1.jpg" video-id="uTcj2v85y34" />
<img src="https://img.youtube.com/vi/jRuR4GaSsBI/1.jpg" video-id="jRuR4GaSsBI" />
<img src="https://img.youtube.com/vi/ec7aQPLSBsU/1.jpg" video-id="ec7aQPLSBsU" />

<img src="https://img.youtube.com/vi/uTcj2v85y34/1.jpg" video-id="uTcj2v85y34" />
<img src="https://img.youtube.com/vi/jRuR4GaSsBI/1.jpg" video-id="jRuR4GaSsBI" />
<img src="https://img.youtube.com/vi/ec7aQPLSBsU/1.jpg" video-id="ec7aQPLSBsU" />
</div>

</div>

<script>
    jQuery(document).ready(function(){


        jQuery('.video-list img').on('click',function () {

            var videoId = jQuery(this).attr('video-id');
            var videoUrl = 'https://www.youtube.com/embed/'+videoId;
            jQuery('#main-play').attr('src',videoUrl);

        });
    });
</script>

【讨论】：

【解决方案3】：

这不起作用，因为页面已被解析，并且只有在使用新 ulr 刷新时才会发生。

你需要使用ajax来预加载带有新url的页面，然后设置iframe。

【讨论】：