在 Bootstrap 模式中自动播放 YouTube 视频

答案：使用 JavaScript 添加删除视频源 URL

如果尝试通过附加视频源 url 来自动播放嵌入在 Bootstrap 模式中的 YouTube 视频，即 <iframe> src 属性值与 ?autoplay=1 它将无法正常工作，因为视频是在显示模式之前开始播放的。

要解决此问题，您可以使用 JavaScript 根据是否显示 Bootstrap 模态来添加或删除 YouTube 视频源 url。让我们看看它是如何工作的：

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Autoplay YouTube Video in Bootstrap Modal</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>
<style>
    .modal-content iframe{
        margin: 0 auto;
        display: block;
    }
</style>
<script>
$(document).ready(function(){
    /* 获取 iframe src 属性值，即 YouTube 视频 url
    and store it in a variable */
    var url = $("#cartoonVideo").attr('src');
    
    /* 在页面加载时删除 iframe src 属性
     防止在后台自动播放 */
    $("#cartoonVideo").attr('src', '');
    
    /* 将最初存储的 url 分配回 iframe src
     模态显示时的属性 */
    $("#myModal").on('shown.bs.modal', function(){
        $("#cartoonVideo").attr('src', url);
    });
    
    /* 将空 url 值分配给 iframe src 属性时
     模态隐藏，停止视频播放 */
    $("#myModal").on('hide.bs.modal', function(){
        $("#cartoonVideo").attr('src', '');
    });
});
</script>
</head>
<body>
<div class="bs-example">
    <!-- 按钮 HTML（触发模态） -->
    <a href="#myModal" class="btn btn-lg btn-primary" 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">&times;</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?autoplay=1" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>     
</body>
</html>

FAQ 相关问题解答

以下是与此主题相关的更多常见问题解答：

在 Bootstrap 模式中自动播放 YouTube 视频

答案：使用 JavaScript 添加删除视频源 URL

示例

FAQ 相关问题解答

关于我们

联系方式

互动工具