html 中 id 必须唯一，重复使用 `id=”mybtn”` 或 `id=”mymodal”` 会导致 javascript 只能获取第一个元素，造成仅首个按钮生效。本文提供基于类名（class）与事件委托的通用解决方案，支持任意数量的视频弹窗，代码简洁、可维护性强。
在构建多视频弹窗交互时，一个常见却极易被忽视的错误是：重复使用相同的 id 属性。你的原始代码中，四个
✅ 正确解法是：弃用重复 ID，改用语义化 class，并通过事件委托统一管理逻辑。这种方式不仅修复问题，还显著提升代码可扩展性（新增第 5、第 10 个视频只需添加 HTML，无需修改 js）。
✅ 推荐实现方案（精简、健壮、无 ID 依赖）
1. HTML 结构（关键：使用 class 替代 id）
× × 2. css 样式（控制显隐与基础布局）
.modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); z-index: 1000; } .modal.active { display: flex; align-items: center; justify-content: center; } .modal-content { background: white; padding: 20px; border-radius: 8px; max-width: 90%; max-height: 80vh; overflow: hidden; } .close { float: right; font-size: 28px; cursor: pointer; }3. javascript（单次绑定，智能定位）
document.body.addEventListener('click', (e) => { const target = e.target; // 点击触发按钮 → 显示对应 modal 并播放视频 if (target.classList.contains('myBtn')) { const modal = target.nextElementSibling; if (modal && modal.classList.contains('modal')) { modal.classList.add('active'); const video = modal.querySelector('video'); if (video) video.play().catch(e => console.warn("Autoplay prevented:", e)); } } // 点击模态框背景或关闭按钮 → 隐藏并暂停 else if (target.classlist.contains('close') || target === target.closest('.modal')) { const modal = target.classList.contains('close') ? target.closest('.modal') : target; modal.classList.remove('active'); const video = modal.querySelector('video'); if (video) video.pause(); } });⚠️ 注意事项与最佳实践
- 避免内联样式与重复 ID：始终确保 id 唯一；若需批量操作，优先选择 class + querySelectorAll() 或事件委托。
- 处理自动播放限制：现代浏览器禁止静音外的自动播放。如遇 play() failed because the user didn’t interact with the document first，请确保点击触发后调用 play()（本方案已满足）。
- 增强健壮性（可选）：可为每个
- 无障碍优化：建议为 myBtn 添加 role=”button” 和 aria-expanded 属性，提升屏幕阅读器兼容性。
该方案彻底规避了 dom 元素 ID 冲突问题，以声明式结构和事件委托为核心，兼顾可读性、可维护性与浏览器兼容性——无论你有 4 个还是 40 个视频弹窗，只需遵循相同 HTML 模式，一行 JS 即可全局驱动。