HTML/JavaScript：点击关闭按钮后如何停止后台播放的YouTube视频

你现在只是通过CSS隐藏了模态窗，iframe内嵌的YouTube视频并没有被停止，依旧会在后台播放。按下面的逻辑修改代码即可解决问题：

修改说明 #

1. 你当前把关闭事件绑定到了整个模态窗容器上，会导致点击视频区域也触发关闭，首先把关闭事件绑定到X按钮（.btnclose）上
2. 提前存储原始的视频链接，打开模态窗时给iframe赋值链接，关闭时清空iframe的src属性即可停止播放

修改后的JS代码 #

const play = document.querySelector(".fa-play");
const modalwindow = document.querySelector(".popup-modal");
const closeBtn = document.querySelector(".btnclose");
const videoIframe = document.querySelector(".video");
// 存储原始视频地址
const originVideoSrc = videoIframe.src;

play.onclick = function(){
    // 打开模态窗前赋值视频地址
    videoIframe.src = originVideoSrc;
    modalwindow.style.transform = "scaleX(1)";
}

closeBtn.onclick = function(){
    // 关闭时清空视频地址停止播放
    videoIframe.src = '';
    modalwindow.style.transform = "scaleX(0)";
}

如果需要保留点击模态窗空白处也能关闭的效果，只需要额外给模态窗加点击判断，点击的是模态窗本身的时候才触发关闭逻辑即可。

内容的提问来源于stack exchange，提问作者The Grumpy Lion