"Bootstrap Modal Pop up" Youtube视频自动播放，关闭时重新打开视频

Question

我在我的网站上添加了一个youtube视频，它在主页上启动时自动启动。视频打开时会弹出引导模式。但是，当弹出窗口关闭时，视频将再次在背景中播放。

首先，我希望视频自动启动。

第二，当"弹出"关闭时，视频会自动停止

第三，不要让弹出的视频再次在后台播放。

版本*Bootstrap v3.0.3

提前感谢您的帮助。

<!-- POPUP SCRIPT -->  
<script>
$(document).ready(function(){
$("#myModal").on("hidden.bs.modal",function(){
$("#iframeYoutube").attr("src","#");
})
})   

$(document).ready(function(){
$("#myModal").modal("show");
$("#myBtn").click(function(){
$("#myModal").modal();
});
});

</script>


<!-- HEADER -->
<header id="header" class="main__header">   </header>
<!-- POPUP BAŞLANGIÇ -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="background-color: #f9f9f900;">
<div class="modal-body" style="padding: 0px;">
<button type="button" class="close" style="padding:8px; background: white;" data-dismiss="modal">&times;</button>
<iframe id="iframeYoutube" width="100%" height="450px" alt="1" src="https://www.youtube.com/embed/example?&autoplay=1;rel=0&amp;showinfo=0&amp;controls=0&amp" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div> 
<!-- POPUP BİTİŞ -->

Answer 1

首先，您应该在弹出窗口关闭时触发一个函数。此功能应停止在后台播放视频。

$("#modal-close-button").click(function () {
$("#video-stop-button").click(); 
});

$("#video-stop-button").click(function () {
alert("The video should stop as the modal closes because a click on the close button will trigger the stop button ");
});

您应该在弹出窗口关闭时调用此函数，以防止在后台播放视频。