点击蓝色播放按钮视频无响应，如何使其与红色按钮功能一致？

问题根因 #

1. 代码中多处使用document.querySelector(".thePlay")，该方法只会匹配页面中第一个符合类名规则的元素，导致第二个蓝色播放按钮没有绑定点击事件，也没有完成播放器初始化。
2. videoPlayer模块仅维护了一个全局player变量，同时存在多个播放器的场景下无法匹配对应点击的目标视频。
3. 存在冗余的初始化逻辑，和managePlayer、manageCover的统一绑定逻辑冲突，造成逻辑混乱。

调整步骤 #

1. 删除冗余代码

删除onYouTubeIframeAPIReady函数中手动初始化第一个播放器的冗余代码：

// 删掉以下4行
const cover = document.querySelector(".thePlay");
const wrapper = cover.parentElement;
const frameContainer = wrapper.querySelector(".video");
videoPlayer.addPlayer(frameContainer);

同时删除完全多余的initCover自执行函数，manageCover已经统一处理所有播放按钮的点击绑定：

// 删掉整个initCover自执行块
(function initCover() {
 function coverClickHandler() {
   videoPlayer.play();
 }
 const cover = document.querySelector(".thePlay");
 cover.addEventListener("click", coverClickHandler);
}());

2. 调整videoPlayer的addPlayer方法，返回播放器实例

修改后的addPlayer代码如下：

function addPlayer(video, settings) {
  const playerVarDefaults = {
    host: "https://www.youtube-nocookie.com",
    videoId: video.dataset.id
  };
  playerVarDefaults.events = {
    "onReady": onPlayerReady
  };
  playerVars = Object.assign(playerVarDefaults, settings);
  const newPlayer = new YT.Player(video, playerVars);
  players.push(newPlayer);
  return newPlayer; // 新增返回播放器实例
}

3. 调整managePlayer的点击逻辑，创建完成后自动播放对应视频

修改createCoverClickHandler方法，创建完播放器后监听ready事件自动触发播放：

function createCoverClickHandler(playerSettings) {
  return function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const wrapper = cover.nextElementSibling;
    show(wrapper);
    const player = createPlayer(wrapper, playerSettings);
    wrapper.player = player;
    // 新增：播放器加载完成后自动播放
    player.addEventListener("onReady", () => player.playVideo());
  };
}

生效效果 #

修改完成后，红色、蓝色两个播放按钮点击后都会加载对应视频，加载完成后自动播放，表现完全一致。

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