您如何使多个YouTube嵌入在单击时暂停？

发布于 2025-02-09 12:25:01 字数 1777 浏览 1 评论 0原文

我有多个YouTube嵌入的设置，就像播放列表一样，每个视频中都有缩略图图像（class =“ vid-image”）。

我要在单击任何缩略图映像时要播放的任何视频要暂停。

我找到了一些代码，但它仅用于第一个视频。要了解我的意思，请播放第一个视频，然后单击任何黑匣子（.VID图像），并且视频将暂停。

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

我在这里设置了一个JSFIDDLE：还下面：

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的初学者，因此无法弄清楚如何调整代码。

先感谢您：）。

原文

I've got multiple Youtube embeds set up like a playlist, with thumbnail images (class="vid-image") for each video.

I'm wanting any video that is playing to pause when you click on any thumbnail image .

I've found some code, but it's only working for the first video. To see what I mean, play the first video and then click on any of the black boxes (.vid-image) and the video will pause.

But, play either the second or the third video and then click on any of the black boxes, you'll see the video doesn't pause.

I've got a JSFiddle set up here: https://jsfiddle.net/74skr0qt/ but code is also below:

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":""}', '*');
});

Any help would be much appreciated - I've spent hours trying different solutions with no luck. I'm a beginner at Javascript so unable to figure out how to adjust the code.

Thank you in advance :).

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

睫毛溺水了 2025-02-16 12:25:02

您可以通过将JS更改为：

function stopAllVideos() {
  $('.youtube-video').each((i, videoElem) => {
    videoElem.contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
  });
};

$('.vid-image').click(stopAllVideos);

现在仅针对第一个视频发布消息来

$('.youtube-video')[0]

您

实现此目的

You can achieve this by changing your js to:

function stopAllVideos() {
  $('.youtube-video').each((i, videoElem) => {
    videoElem.contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
  });
};

$('.vid-image').click(stopAllVideos);

You are now posting the message only for the first video, in your code