javascript-你如何让多个 Youtube iframe 嵌入在点击时暂停？

我已经像播放列表一样设置了多个 Youtube 嵌入，每个视频都有缩略图 (class="vid-image")。

当您单击任何缩略图时，我希望任何正在播放的视频都暂停。

我找到了一些代码，但它只适用于第一个视频。要了解我的意思，请播放第一个视频，然后单击任何黑框 (.vid-image)，视频将暂停。

但是，播放第二个或第三个视频，然后单击任何黑框，您会看到视频不会暂停。

我在这里设置了一个 JSFiddle：https ://jsfiddle.net/74skr0qt/但代码也在下面：

HTML：

<iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/ScMzIvxBSi4?enablejsapi=1&version=3&playerapiid=ytplayer" modestbranding="0"  controls="0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/NpEaa2P7qZI?enablejsapi=1&version=3&playerapiid=ytplayer" modestbranding="0"  controls="0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/R5jIoLnL_nE?enablejsapi=1&version=3&playerapiid=ytplayer" modestbranding="0"  controls="0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<div class="vid-image"></div>

<div class="vid-image"></div>

<div class="vid-image"></div>

JAVASCRIPT：

$('.vid-image').click(function(){

  $('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');

});

任何帮助将不胜感激 - 我花了几个小时尝试不同的解决方案，但没有运气。我是 Javascript 的初学者，所以无法弄清楚如何调整代码。

先感谢您 ：）。