Javascript 单击外部模式后停止YouTube嵌入

当在我的项目上单击某个按钮时，会打开一个模式，其中包含我嵌入的两个YouTube视频。但问题是，当我在该模式外单击以关闭该模式时，视频将继续播放（无论播放哪个视频）。我想视频停止播放时，用户点击以外的模式

这就是我尝试过的

<a class="primary-btn text-uppercase" data-toggle="modal" data-target="#workshops">View</a>
<div class="modal fade" id="workshops" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    A sample of some our workshops and tutorials
                </h4>
            </div>
            <div class="modal-body">
                <div class="resp-container">
                    <iframe class="resp-iframe" src="https://www.youtube.com/embed/-EX-zHVVSI8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
                <div class="resp-container">
                    <iframe class="resp-iframe" src="https://www.youtube.com/embed/bUPg5BZj7dY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
                <span onclick="stopVideo(this.getAttribute('vdoId'))" vdoId="resp-iframe" id="CloseModalButton" data-dismiss="modal"></span>
            </div>
        </div>
    </div>
</div>
<script>
    function stopVideo(id){
        var src = $j('iframe.'+id).attr('src');
        $j('iframe.'+id).attr('src','');
        $j('iframe.'+id).attr('src',src);
    }
</script>

视图
我们的一些研讨会和教程的样本
功能停止视频（id）{
var src=$j（'iframe.'+id）.attr（'src'）；
$j（'iframe.'+id）.attr（'src'，''）；
$j（'iframe.'+id）.attr（'src'，src）；
}

现在我得到一个只有一个我嵌入的视频模式，当我关闭模式时它不会停止

更新 根据给出的答案，这是我尝试过的：

<script>
    $('#workshops').on('hide.bs.modal', function () {
        stopVideo("resp-iframe");
    });
</script>

$（'#workshops'）.on（'hide.bs.modal'，function（）{
停止视频（“响应帧”）；
});

当我单击模态外部的空间时，我无法再关闭模态。这是我在浏览器控制台中收到的错误消息：

Uncaught ReferenceError: stopVideo is not defined
    at HTMLDivElement.<anonymous> ((index):564)
    at HTMLDivElement.dispatch (jquery-3.2.1.min.js:3)
    at HTMLDivElement.q.handle (jquery-3.2.1.min.js:3)
    at Object.trigger (jquery-3.2.1.min.js:4)
    at HTMLDivElement.<anonymous> (jquery-3.2.1.min.js:4)
    at Function.each (jquery-3.2.1.min.js:2)
    at r.fn.init.each (jquery-3.2.1.min.js:2)
    at r.fn.init.trigger (jquery-3.2.1.min.js:4)
    at r.t.hide (bootstrap.min.js:6)
    at HTMLDivElement.<anonymous> (bootstrap.min.js:6)

未捕获引用错误：未定义停止视频
在HTMLDEVELENT。（（索引）：564）
在htmldevelment.dispatch（jquery-3.2.1.min.js:3）
位于htmldevelment.q.handle（jquery-3.2.1.min.js:3）
at Object.trigger（jquery-3.2.1.min.js:4）
在HTMLDEVELENT。（jquery-3.2.1.min.js:4）
在Function.each（jquery-3.2.1.min.js:2）
在r.fn.init.each（jquery-3.2.1.min.js:2）
在r.fn.init.trigger（jquery-3.2.1.min.js:4）
在r.t.hide（bootstrap.min.js:6）
在HTMLDEVELENT。（bootstrap.min.js:6）

我假设您正在使用的引导模式有两个事件在关闭时触发#1

隐藏.bs.modal

#2

隐藏.bs.modal

。看一看这本书

因此，要在关闭模式时运行停止函数，您需要创建一个新的eventhandler，如下所示：

$('#workshops').on('hide.bs.modal', function() {
  // Stop the videos as soon as the modal's hide function gets called
  stopVideo("resp-iframe"); // your id seems to be a static value you could ofcourse also use the value from your #CloseModalButton
});

---

不确定我做错了什么，但这不起作用。当然我有点javascript业余爱好者。将使用无法工作的尝试解决方案更新问题您现在正在匿名回调中声明函数。您只想在其中使用该函数。我将更新我的回答。如果不是这样，请检查您的控制台[F12]您现在很可能在

stopVideo

功能中出现错误。您以前定义过吗？我在事件处理程序中更改了函数调用这一事实并不意味着您不需要声明该函数。