JS多视频场景下点击占位图替换对应视频的实现方法

需求说明 #

• 搭建6组视频组成的网格布局
• 交互逻辑：点击视频占位图区域时，隐藏占位区域，显示同组相邻的视频iframe元素
• 现有代码仅支持单组视频正常运行，尝试for循环遍历时nextElementSibling逻辑失效，需要适配多组场景的简洁实现

现有代码参考 #

单组网格DOM结构 #

<div class="videography__content--item">
  <p class="video__title">Ноель Гоеман - Sanctus</p>
  <div class="video__placeholder--container">
     <img src="img/videography/noel-goemanne-sanctus.jpg" alt="" class="placeholder">
     <div class="play-button"></div>
  </div>
  <iframe class="video-insert" src="https://www.youtube-nocookie.com/embed/BkRqCCkUku0" 
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; 
clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

原有仅支持单组的JS代码 #

(function () {
  const placeholder = document.querySelector(".video__placeholder--container");
  const video = placeholder.nextElementSibling;

  placeholder.addEventListener("click", switchToVideo);

  function switchToVideo() {
    placeholder.style.display = "none";
    video.style.display = "block";
  }
})();

问题根源 #

原有代码使用document.querySelector()获取元素，这个方法只会返回匹配选择器的第一个DOM元素，所以无论页面有多少组视频，只会给第一个占位容器绑定事件，其他占位容器点击不会有任何反应。
之前for循环遍历失效基本是变量作用域问题导致的，比如用var声明循环变量，最终所有事件回调都会指向最后一组元素。

最终实现代码 #

forEach非常适合当前场景，它遍历节点列表时每个回调都有独立作用域，不会出现变量覆盖问题，也不需要手动维护索引：

(function () {
  // 获取页面上所有的视频占位容器
  const placeholderList = document.querySelectorAll(".video__placeholder--container");

  // 给每个占位容器单独绑定点击事件
  placeholderList.forEach(placeholder => {
    // 提前获取当前占位容器对应的相邻视频元素
    const videoEl = placeholder.nextElementSibling;

    placeholder.addEventListener("click", () => {
      placeholder.style.display = "none";
      videoEl.style.display = "block";
    })
  })
})();

配套CSS补充 #

需要给视频元素加默认隐藏样式，避免页面加载时直接显示所有视频：

.video-insert {
  display: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

方案说明 #

• 不需要修改现有HTML结构，只要每组视频保持「占位容器+相邻iframe」的结构，无论放多少组视频都能正常运行
• 不需要手动管理循环索引，每个遍历项独立绑定事件，不会出现变量错乱问题
• 逻辑简洁，适合初学者理解和维护

内容的提问来源于stack exchange，提问作者l-yusya