点击蓝色播放按钮后YouTube视频无法播放的代码修复咨询

问题根因 #

1. 点击播放事件仅绑定给了类名为.playa的红色按钮，未覆盖类名为.playb的蓝色按钮
2. YouTube播放器初始化逻辑仅遍历了红色按钮，未对蓝色按钮对应的视频容器做初始化
3. 之前尝试直接修改选择器未生效，是因为需要同时修改事件绑定和播放器初始化两处的选择器范围

具体修改步骤 #

1. 修正播放器初始化的元素范围 #

修改onYouTubeIframeAPIReady函数中的选择器，同时选中两类播放按钮：

// 修改前
const cover = document.querySelectorAll(".playa");
// 修改后
const cover = document.querySelectorAll(".playa, .playb");

2. 修正点击事件绑定的元素范围 #

修改最下方initCover自执行函数中的选择器，给蓝色按钮也绑定播放事件：

// 修改前
const covers = document.querySelectorAll(".playa");
// 修改后
const covers = document.querySelectorAll(".playa, .playb");

可选优化（多视频场景必须） #

如果页面需要同时存在多个可独立播放的视频，需要修改videoPlayer的单实例逻辑，修改为点击时获取当前按钮对应的播放器实例再调用播放方法，避免永远播放最后初始化的视频。

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