如何在 Bootstrap 模态中嵌入 YouTube 视频
答案:在模态体内插入 YouTube 代码
您可以像在普通网页上一样轻松地将 YouTube 视频嵌入或放置在 Bootstrap 模态中。 只需从 YouTube 网站获取嵌入视频的代码并将其放在 .modal-body 元素中。 但是有一个小问题； 当您关闭模态窗口时，YouTube 视频不会自动停止。 它仍会在后台播放。
要解决此问题，您可以简单地使用 jQuery 动态切换 YouTube 视频 iframe src 属性的 url 值。 让我们试试下面的例子:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>在 Bootstrap 模式中插入 YouTube 视频</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
/* 获取 iframe src 属性值，即 YouTube 视频 url
并将其存储在变量中 */
var url = $("#cartoonVideo").attr('src');
/* 将空 url 值分配给 iframe src 属性时
模态隐藏，停止视频播放 */
$("#myModal").on('hide.bs.modal', function(){
$("#cartoonVideo").attr('src', '');
});
/* 将最初存储的 url 分配回 iframe src
再次显示模态时的属性 */
$("#myModal").on('show.bs.modal', function(){
$("#cartoonVideo").attr('src', url);
});
});
</script>
</head>
<body>
<div class="m-4">
<!-- 按钮 HTML (触发模态) -->
<a href="#myModal" class="btn btn-primary btn-lg" data-toggle="modal">Launch Demo Modal</a>
<!-- 模态 HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">YouTube Video</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe id="cartoonVideo" class="embed-responsive-item" width="560" height="315" src="//www.youtube.com/embed/YE7VzlLtp-4" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>请查看 HTML5 视频 上的教程，了解在网页上插入视频的各种技术，包括广泛使用的 YouTube 视频 .
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
- 在 Bootstrap 模态中自动播放 YouTube 视频
- 如何将 Bootstrap 模态垂直居中对齐
- 如何更改 Bootstrap 模态框的默认宽度
- 如何在页面加载时启动 Bootstrap 模式
