jquery - 引导模式内的 youtube iframe 上的事件

Question

我无法理解为什么当视频处于通过 jquery 添加其 iframe 属性的模式中时，我无法获取 youtube iframe 的事件，该属性是从启动模式的链接中获取的。

如果我手动将 SRC 放在 iframe 标记中并运行，一切都会按预期工作。

我创建了两个代码笔来说明这一点。

https://codepen.io/nick-jlsa/pen/GPZogZ

首先这是按预期工作的代码笔。该按钮启动一个模态，该模态有一个带有 youtube 视频 SRC 的 iframe。视频的边框颜色会根据播放器状态而改变。这很好用。但视频 SRC 必须已经在 iframe 标记中。我需要 iframe 标签由启动它的链接填充。

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" id="play-video">
  launch and play youtube video
</button>

<iframe id="player" width="100%" height="315" src="//www.youtube.com/embed/ALUKDkOxVPo?enablejsapi=1" frameborder="0" allowfullscreen style="border: solid 4px #37474F"></iframe>

=====================

https://codepen.io/nick-jlsa/pen/gZrPeR

其次是一个代码笔，显示当点击链接时通过 jQuery 注入 iframe src 时，JS 看不到播放器事件。

<a class="launch-video-modal clickable" data-toggle="modal" data-target="#videoModal" data-video="https://www.youtube.com/watch?v=ALUKDkOxVPo"><span class="text"><span class="text-inner">Watch Now</span></span></a>

<iframe id="player" width="100%" height="315" src="" frameborder="0" allowfullscreen style="border: solid 4px #37474F"></iframe>

$('a.launch-video-modal').click(function() {
    var theModal = $(this).data("target"),
    videoSRC = $(this).attr("data-video"),
    splitter = '?v=',
    indexOf = videoSRC.indexOf(splitter),

    videoID = videoSRC.slice(indexOf+splitter.length);

    videoSRCauto = "//youtube.com/embed/" + videoID + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1&enablejsapi=1";
    $(theModal + ' iframe').attr('src', videoSRCauto);
    $(theModal + ' button.close').click(function () {
    $(theModal + ' iframe').attr('src', videoSRC);
    });
});

标签： jquerytwitter-bootstrap-3youtube-api