点击缩略图时如何暂停所有播放中的YouTube iframe嵌入视频

代码只对第一个视频生效的原因非常简单：$('.youtube-video')[0]只会选中页面上第一个class为youtube-video的iframe，剩下的第二、第三个视频从来没收到过暂停指令，自然不会停止播放。

直接替换你原来的.vid-image点击事件逻辑即可，修复后的代码会遍历所有视频iframe，逐个发送暂停指令：

$('.vid-image').click(function(){
  $('.youtube-video').each(function() {
    this.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
  });
});

• 你现有iframe地址里带的enablejsapi=1参数是YouTube iframe支持JS控制的必要配置，不需要修改
• 后续新增同类型嵌入视频时，只要给iframe加上youtube-video类名，就会自动被这段逻辑控制，点击缩略图时统一暂停
• 不需要额外引入其他依赖，你现有的jQuery环境就可以直接运行这段代码

内容的提问来源于stack exchange，提问作者Liv Strawbridge