Javascript 多个带有自定义播放按钮的YouTube嵌入视频

我正在尝试在页面上嵌入多个YouTube视频，每个视频都有自己的覆盖和播放按钮，单击该按钮时会隐藏相关覆盖并播放视频

我可以将其用于单个视频，但当我尝试在视频中添加更多内容并循环时，onPlayerReady函数似乎没有被调用

这是我的javascript

// Inject YouTube API script
const tag = document.createElement('script');
tag.src = '//www.youtube.com/player_api';
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

const players = document.querySelectorAll('.js-video-embed > iframe');
const playButtons = document.querySelectorAll('.video__button');
const overlays = document.querySelectorAll('.video__overlay');

window.onYouTubePlayerAPIReady = () => {
  for (var i = 0; i < players.length; i++) {
    new YT.Player(players[i], {
      events: {
        'onReady': onPlayerReady
      },
    });
  }
};

function onPlayerReady() {
  for (var i = 0; i < players.length; i++) {
    // bind events
    playButtons[i].addEventListener('click', () => {
      players[i].playVideo();
      overlays[i].style.display = 'none';
    });
  }
}

//注入YouTube API脚本
const tag=document.createElement（'script'）；
tag.src='//www.youtube.com/player_api'；
const firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
const players=document.querySelectorAll（'.js video embed>iframe'）；
const playButtons=document.querySelectorAll（'.video__按钮'）；
const overlays=document.querySelectorAll（'.video_uuoverlays'）；
window.onyoutublayerapiready=（）=>{
对于（变量i=0；i{
播放器[i]。播放视频（）；
覆盖[i].style.display='none'；
});
}
}

提前感谢您提供的任何建议

基于此，确保iframe src URL在末尾具有

？enablejsapi=1

。在这篇文章中还指出，onPlayerReady不起作用的原因是iframe缺少一个属性：

enablejsapi=“1”

，并且在YouTube视频url中也缺少

？enablejsapi=1

。您也可以参考这篇文章：基于此，确保iframe src url在结尾处有

？enablejsapi=1

。在本文中还指出，onPlayerReady不起作用的原因是iframe缺少一个属性：

enablejsapi=“1”

，并且在YouTube视频url中也缺少

？enablejsapi=1

。您也可以参考本文：