Question

我的网站上有一个Bootstrap模式，当它弹出时会自动播放YouTube视频。当我点击右上角的X按钮并且视频停止播放时，模态关闭。但是，当我通过在视频弹出窗口外单击关闭模式时，视频将继续在后台播放。此外，当我点击启动按钮时，视频会自动播放。

当我在视频弹出窗口外点击时，如何才能使视频停止播放？

以下是我使用youtube视频的模式的HTML代码：

<button id="launch-button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#myModal" data-theVideo="http://www.youtube.com/embed/loFtozxZG0s"><i class="fa fa-play"></i></button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <!-- BODY -->
                <div class="modal-body">
                    <iframe width="100%" height="350" src="" frameborder="0"></iframe>
                </div>
            </div>
        </div>
    </div>

以下是我的JavaScript代码：

function autoPlayYouTubeModal(){
    var trigger = $("body").find('[data-toggle="modal"]');
    trigger.click(function() {
        var theModal = $(this).data( "target"),
            videoSRC = $(this).attr( "data-theVideo"),
            videoSRCauto = videoSRC+"?autoplay=1" ;
        $(theModal+' iframe').attr('src', videoSRCauto);
        $(theModal+' button.close').click(function () {
            $(theModal+' iframe').attr('src', videoSRC);
        })
    })
}

$(document).ready(function(){
    autoPlayYouTubeModal();
})

感谢您的帮助！

Answer 1

我能够弄明白以防万一有人遇到同样的问题。

我补充说：

$('#myModal').on('hidden.bs.modal', function (e) {
    // do something...
})

到我的javascript代码。最终结果如下：

function autoPlayYouTubeModal(){
    var trigger = $("body").find('[data-toggle="modal"]');
    trigger.click(function() {
        var theModal = $(this).data( "target"),
            videoSRC = $(this).attr( "data-theVideo"),
            videoSRCauto = videoSRC+"?autoplay=1" ;
        $(theModal+' iframe').attr('src', videoSRCauto);
        $(theModal+' button.close').click(function () {
            $(theModal+' iframe').attr('src', videoSRC);
        })
        $('#myModal').on('hidden.bs.modal', function (e) { // new code
            $(theModal+' iframe').attr('src', videoSRC);
        })
    })
}

希望这有帮助！

当Bootstrap Modal关闭时，Youtube Video不会停止播放

1 个答案: