尝试切换 URL 的 iframe YouTube 视频点击 jQuery

Question

我有两个 div。一个包含 YouTube iframe 视频，另一个包含 YouTube 缩略图。按下按钮后，这些是预期的步骤：

-检索缩略图URL

-将 iframe 视频的 URL 替换为缩略图所来自的 YouTube 视频的 URL。

这是 JSFiddle。看起来它应该可以工作，但是当我单击按钮时，我只会看到黑屏。谁能提供建议？ http://jsfiddle.net/jw1sw01v/1/

HTML

<div id="stage">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/e-ORhEE9VVg" frameborder="0" allowfullscreen></iframe>
</div>


<div class="slideYThumbnail">
        <img class="slideYThumbnailInside" src="http://img.youtube.com/vi/kt0g4dWxEBo/0.jpg">
        </img>
</div>

jQuery

$(document).on('click', '.slideYThumbnail', function(event) {
        var change = $(this).find("img").attr("src").split("/");
        alert(change[4]);
        $("#stage > iframe").attr("src", "https://www.youtube.com/embed/' + change[4] + '"); 
});

Answer 1

你必须删除 js 中的单引号

$(document).on('click', '.slideYThumbnail', function(event) {
    var change = $(this).find("img").attr("src").split("/");
    alert(change[4]);
    $("#stage > iframe").attr("src", "https://www.youtube.com/embed/" + change[4] ); 
});

Answer 2

添加这个 js 而不是你的 JS:

$(document).on('click', '.slideYThumbnail', function (event) {
  var change = $(this).find("img").attr("src").split("/");
  alert(change[4]);
  $("#stage > iframe").attr("src", "https://www.youtube.com/embed/"change[4]);
});

工作Link

Answer 3

像这样从新的视频源连接中删除单引号：

 $("#stage > iframe").attr("src", "https://www.youtube.com/embed/" + change[4]);

Answer 4

直接在图片上

$(document).on('click', '.slideYThumbnailInside', function (event) {
    var change = $(this).attr("src").split("/");
    $("#stage > iframe").attr("src", "https://www.youtube.com/embed/"change[4]);
            
});

尝试切换 URL 的 iframe YouTube 视频点击 jQuery

Trying to switch URL of iframe YouTube video on click with jQuery

html

javascript

youtube

iframe

jquery