本文教你零基础实现“点击按钮显示视频、再点关闭”的交互效果，使用 bootstrap 5 快速构建响应式模态框（modal），无需手写复杂 js，兼容主流浏览器。
要让视频在点击按钮后以“弹窗”形式优雅呈现，并支持再次点击关闭，最简洁可靠的方式是借助成熟的前端框架——Bootstrap 5 提供的 Modal 组件。它已内置完整的显示/隐藏逻辑、遮罩层、过渡动画和键盘支持（如按 Esc 关闭），非常适合初学者快速上手。
下面是一个完整可运行的示例。我们将 <video> 标签嵌入 Modal 的 modal-body 中，并确保视频自动居中、响应式缩放：
<!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-5 text-center">
<h2>视频演示区</h2>
<p>点击下方按钮，观看嵌入式视频</p>
<!-- 触发按钮：data-bs-toggle="modal" 指定激活哪个模态框 -->
<button type="button" class="btn btn-success 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-dialog-centered">
<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">
<!-- 响应式视频容器：确保在小屏下不溢出 -->
<div class="ratio ratio-16x9">
<video controls autoplay muted class="w-100">
<source src="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
您的浏览器不支持视频播放。
</video>
</div>
</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>✅ 关键要点说明：
- data-bs-toggle="modal" 和 data-bs-target="#videoModal" 是触发模态框的核心属性，无需一行 JavaScript；
- 使用 <div class="ratio ratio-16x9"> 包裹 <video>，可实现宽高比自适应（推荐 16:9），避免拉伸变形；
- autoplay muted 允许静音自动播放（多数浏览器强制要求静音才允许自动播放）；
- modal-dialog-centered 和 modal-xl 分别实现垂直居中与大尺寸显示，提升观看体验；
- 关闭方式有三种：点击右上角 ×、点击灰色遮罩层、按键盘 Esc 键——全部由 Bootstrap 自动处理。
⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 若使用本地视频文件，请将 src 改为相对路径（如 "./videos/demo.mp4"），并确保服务器环境运行（直接双击 HTML 可能因 CORS 被浏览器阻止）；
- 如需禁用自动播放，移除 autoplay muted 即可；若想默认静音但允许用户手动开启声音，保留 muted 并删除 autoplay；
- Bootstrap 5 不依赖 jQuery，因此无需额外引入 jQuery 库，轻量且现代。
掌握这一模式后，你还可以轻松扩展：添加多个视频按钮、嵌入 YouTube iframe、或配合 JavaScript 实现播放进度记忆等功能。从一个按钮开始，你已迈出了交互式网页开发的第一步。
