关闭模态后视频继续播放

Question

当我关闭我的模式时，视频继续在后台播放。这是一个非常小的程序，只有 HTML 和 CSS，所以我不想使用 YouTube API。这是我的模态代码：

<div id="lucaModal" class="modal modal-fullscreen" role="dialog">
  <button id="lucaButton" class="btn btn-danger closeIFrame" data-dismiss="modal">
    CLOSE
  </button>
  <div class="modal-content">
    <iframe class="trailer" id="trailer" title="YoutubeVideoPlayer" 
            style="height: 100%; width: 100%;" 
            src="https://www.youtube.com/embed/mYfJxlgR2jw" frameborder="0">
    </iframe>
  </div>
</div>

我试过jQuery，但我的模式不会这样关闭：

$(document).ready(function(){
    $("#lucaModal").modal('show');
    $("#lucaButton").click(function(){
        $("#lucaModal").modal('hide');
    });
});

Answer 1

所以我研究了您的代码并找到了解决此问题的方法。下面我用JQuery解决了你的

//below is click detector that checks if the user has clicked anywhere
$('body').on('click',function(){
    //if the modal is no longer visible on the screen
    if(!$('#lucaModal').is(':visible')){
        //we get the src of the current video
        var trailer = $('#trailer').attr('src');
        //and reset it, that will sort out your problem
        $('#trailer').attr('src',trailer);
    }
});

只需将上面的代码复制并粘贴到您的 js 文件中，看看它是否有效。如果确实如此，那么可以尝试一下，也许您可以创建一种更好的方法来处理此问题。

谢谢。

关闭模态后视频继续播放

Video keeps playing after closing modal

html

iframe

jquery

bootstrap-5