Question

我正在使用this tutorial代码打开一个显示iframe的模式来播放YouTube或vimeo视频。

问题是，正如链接评论中所述，它不包括在模式关闭后停止视频播放的代码（通过点击关闭按钮或点击视频外部的任何内容我是JS的新手，所以我在评论中尝试了每一条建议，但仍然没有任何效果。我假设他们的指示更好地了解JS以获得他们的建议。所以如果可以，请“像我5岁那样解释。”

以下是JS的代码：

jQuery(document).ready(function() {

$('.launch-modal').on('click', function(e){
    e.preventDefault();
    $( '#' + $(this).data('modal-id') ).modal();
});

});

以下是HTML模式的代码：

        <!-- MODAL-->
        <div class="modal fade" id="modal-video" tabindex="-1" role="dialog" aria-labelledby="modal-video-label">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="modal-video">
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe src="https://www.youtube.com/embed/cp-Tt3aOYVY" frameborder="0" allowfullscreen></iframe>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-8 col-lg-offset-2 text-center">
                                <br><br>
                                <h4 class="section-heading">Lorem Ispum</h4>
                                <hr class="primary">
                                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

这是CSS代码：

.modal-backdrop.in {
opacity: 100;
background: white;
}

.modal-content {
background: none;
border: 0;
-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
color: black;
}

.modal-body {
padding: 0 25px 25px 25px;
}

.modal-header {
padding: 25px 25px 15px 25px;
text-align: right;
}

.modal-header, .modal-footer {
border: 0;
}

.modal-header .close {
float: none;
margin: 0;
font-size: 36px;
color: black;
font-weight: 300;
text-shadow: none;
opacity: 1;
}

.modal-dialog {
width: 80%;
margin: 0px auto;
color: black;
}

非常感谢您的帮助！

Answer 1

寻求我最亲近的编码员亲戚的帮助，他能够通过用以下代码替换JS代码来解决所有问题：

jQuery(document).ready(function() {

    $('.launch-modal').on('click', function(e){
        e.preventDefault();
        var $modalElement = $('#' + $(this).data('modal-id'));
        $modalElement.modal();
        var $iframe = $modalElement.find('iframe')[0];
        $modalElement.on('hide.bs.modal', function (e) {
            $iframe.src = $iframe.src; 
        });
    });
});

Answer 2

尝试删除绑定到按钮的操作，并在单击关闭按钮时添加另一个jQuery事件以标记：

$("#closebutton").click(function(){
   $("iframe").remove();   //For Safety
   $(".modal").remove();
});

在关闭模态后停止iframe视频

2 个答案: