本文教你零基础实现“点击按钮显示视频、再点一次隐藏”的交互效果，使用 bootstrap 5 快速构建响应式模态框，并嵌入 `
要实现“点击按钮弹出视频、再点关闭”的功能，最高效且适合初学者的方式是借助 Bootstrap 5 的内置 Modal 组件——它原生支持通过数据属性（data-bs-toggle="modal" 和 data-bs-target）控制显隐，自动处理遮罩层、焦点管理、ESC 关闭、点击背景关闭等细节，完全免去手动编写 JavaScript 的负担。
以下是一个完整可运行的示例（已优化为实际可用的视频嵌入方案）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>点击弹出视频模态框</title>
<!-- 引入 Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
<div class="container mt-4">
<h3 class="mb-3">视频演示区</h3>
<p>点击下方按钮，弹出内嵌视频；再次点击「×」或「关闭」即可隐藏。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12540" title="javascript-typescript-typescript-scaffold"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="javascript-typescript-typescript-scaffold" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12540" title="javascript-typescript-typescript-scaffold">javascript-typescript-typescript-scaffold</a>
<p>你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型</p>
</div>
<a href="/xiazai/skill12540" title="javascript-typescript-typescript-scaffold" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<!-- 触发按钮 -->
<button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#videoModal">
▶ 播放演示视频
</button>
</div>
<!-- 视频模态框 -->
<div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl"> <!-- 使用 modal-xl 获得更大播放区域 -->
<div class="modal-content">
<div class="modal-header bg-dark text-white">
<h5 class="modal-title" id="videoModalLabel">产品操作演示</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<!-- 嵌入视频：支持 MP4/WebM，推荐添加 poster 封面和 controls -->
<video width="100%" height="auto" controls poster="https://via.placeholder.com/800x450/2c3e50/ffffff?text=Video+Preview">
<source src="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
<source src="https://sample-videos.com/video321/webm/720/big_buck_bunny_720p_1mb.webm" type="video/webm">
您的浏览器不支持 video 标签。
</video>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<!-- 必须引入 Bootstrap JS（含 Popper）以启用 Modal 功能 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>✅ 关键说明与注意事项：
立即学习“前端免费学习笔记（深入）”；
- 无需写 JS：全部通过 HTML 属性驱动（data-bs-toggle, data-bs-target, data-bs-dismiss），Bootstrap 自动绑定事件；
- 视频建议：使用 .mp4（兼容性最好）和 .webm（压缩更优）双格式提供，确保跨浏览器播放；
- 移动端友好：modal-xl + width="100%" 适配不同屏幕，controls 属性保留播放/暂停/音量等基础操作；
- 用户体验增强：添加 poster 属性设置封面图，避免空白黑屏；模态框头部使用深色背景提升可读性；
- 安全提示：若视频来自本地（如 video.mp4），请确保文件路径正确且服务器已启动（直接双击 HTML 可能因 CORS 无法加载本地视频，建议用 Live Server 插件预览）。
? 进阶小贴士（可选）：
如需“按钮文字随状态切换”（例如首次显示“播放”，再次点击变为“关闭中…”），则需少量 JavaScript 监听 shown.bs.modal 和 hidden.bs.modal 事件。但对初学者而言，当前纯 HTML 方案已完全满足核心需求——简洁、可靠、易维护。
现在复制代码保存为 .html 文件，用浏览器打开，点击按钮即可看到视频优雅弹出 ✅
