如何将button的value值传递给modal，实现单modal适配多个YouTube视频

第一步：调整批量生成的按钮属性 #

所有视频按钮统一指向同一个模态框，把视频ID、视频标题存到自定义data属性中即可，不需要为每个按钮绑定不同的模态框ID，按钮示例代码如下：

<button type="button" class="btn btn-outline-primary mb-1" 
  data-bs-toggle="modal" 
  data-bs-target="#videoModal" 
  data-video-id="Zdq6f4RXJt"
  data-video-title="Introduction to MongoDB">
Video
</button>

循环生成按钮时，只需替换data-video-id和data-video-title的对应值即可。

第二步：编写单个公共模态框 #

全局仅保留一个模态框，ID设为videoModal，其中标题、iframe地址留空待动态替换：

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-semi-full modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="videoModalTitle"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <iframe id="youtubePlayer" width="100%" height="100%" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div> 
    </div>
  </div> 
</div>

第三步：添加事件监听实现动态传值 #

监听Bootstrap模态框的打开/关闭事件，自动从触发按钮读取属性更新模态框内容，同时关闭时清空iframe地址避免关闭后仍播放声音：

// 监听模态框打开事件
const videoModal = document.getElementById('videoModal')
videoModal.addEventListener('show.bs.modal', function (event) {
  // 获取触发模态框的按钮元素
  const triggerBtn = event.relatedTarget
  // 提取按钮中存储的视频ID和标题
  const videoId = triggerBtn.getAttribute('data-video-id')
  const videoTitle = triggerBtn.getAttribute('data-video-title')
  // 拼接YouTube嵌入地址
  const embedUrl = `https://www.youtube.com/embed/${videoId}`
  
  // 更新模态框标题和视频播放地址
  const modalTitle = videoModal.querySelector('.modal-title')
  const player = videoModal.querySelector('#youtubePlayer')
  modalTitle.textContent = videoTitle
  player.src = embedUrl
})

// 监听模态框关闭事件，清空视频地址停止播放
videoModal.addEventListener('hide.bs.modal', function () {
  const player = videoModal.querySelector('#youtubePlayer')
  player.src = ''
})

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