事件触发后选择当前 iframe答案

【问题标题】：Select current iframe after event fired事件触发后选择当前 iframe
【发布时间】：2017-04-20 11:08:21
【问题描述】：

我正在使用带有 Youtube 视频 iframe 的 Bootstrap 3 模式。我使用this piece of js实现了一个简单的javascript函数来在模态隐藏时停止视频

$('.music-modal').on('hidden.bs.modal', function () {
    callPlayer('yt-music', 'stopVideo');
});

嵌入的视频看起来像

<div class="youtube" data-embed="gjMBua_1J4Y" id="yt-music">
 <iframe frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/gjMBua_1J4Y?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;enablejsapi=1"></iframe>
</div>

这可以无缝工作，但仅适用于 1 个 iframe in 1 modal。我必须为我添加的每个视频做一个新的 js 函数，因为我用来向 Youtube 视频发送消息的 callPlayer 函数只接受 iframe id 作为参数。

当模式事件隐藏触发时，我想停止当前正在播放的视频。是否可以捕获它，通过 id 获取 THAT modal 中的 iframe，然后用 JS 停止视频？

【问题讨论】：

callPlayer($(this.find(".youtube")[0].id, 'stopVideo');
你错过了 $(this) 包装 ;) 但它就像一个魅力！只有一个问题：(".youtube")[0] 表示只选择与 youtube 类匹配的第一个 id？
没有。这是为了获得 Dom - 与 $(this).attr("I'd") 相同，更清晰

标签： javascript iframe

【解决方案1】：

这行得通

callPlayer($(this).find(".youtube").attr("id"), 'stopVideo');

【讨论】：

【解决方案2】：

遇到了一个强大的解决方案，使用 Youtube API 和 players 数组：仅停止当前正在播放的播放器。

jQuery(".modal").on('hidden.bs.modal', function() {
 $.each(players, function(k, v) {
    if (this.getPlayerState() == YT.PlayerState.PLAYING) {
        this.stopVideo();
    }
 });
});

【讨论】：