Question

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

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

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

扩展说明：

有一个包含youtube视频的popup 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网址。除了这个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');
});

P.S。既然我已经解决了，user3385530可能是正确的

Answer 1

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

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方法。}

Answer 2

这不起作用，因为页面被解析，只有在刷新时才会出现新的ulr。

您需要使用ajax使用新网址预加载页面，然后设置iframe。

Answer 3

<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>

使用jQuery更改YouTube iframe src

3 个答案: