Vue 2.x 下 Bootstrap 4 中将 iframe 视频嵌入 modal 组件并给予相应的视频播放与关闭控制

Bootstra 4 的 Modal 本身不带有视频控制的 JavaScript ，在将视频 iframe 嵌入其中时需要自己编写相应的 Javascript 。

在 Bootstrap 4 的官方教程中 ，推荐的 https://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal Stackoverflow 教程并没有解决在关闭 Modal 组件时自动关闭 Modal 中的视频

关于如何实现关闭 Modal 时自动关闭视频 ，代码如下

Vue Component 中的点击视频播放按钮：

\

Vue Component 中的视频 Modal ：

\
     
\
         
\
             \
         
\
     
\
\

注意 ：这里并没有给 iframe src 属性 ， 是考虑到性能的问题 ， 只有在用户点击播放按钮的时候才加载视频

该 Component 的 methods 中的 addVideoToModal() 方法 ：

addVideoToModal:function(dayIndex,slideIndex){
    var videoUrl=this.groupInfo.route[dayIndex].slide[slideIndex].video;
    $("#maixiong-groupInfo-video-modal iframe").attr("src",videoUrl);
}

并在 mounted 添加 ：

$("#maixiong-groupInfo-video-modal").on("hidden.bs.modal",function(){
    $(this).find("iframe").removeAttr("src");
});

即可实现关闭 Modal 时，其中的视频也被关闭