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

Question

我有两个硬币。一个包含YouTube iframe视频，另一个包含YouTube缩略图。当按下按钮时，以下是预定的步骤：

缩略图的-retrieve网址

-replace网址的iframe视频与YouTube视频的网址缩略图是来自。

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

直接在图像上

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

Answer 2

您必须删除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 3

添加这个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]);
});

工作链接