主页 / 问题 / 1069101
Accepted
daladn0
Asked:2020-01-13 04:27:25 +0800 CST2020-01-13 04:27:25 +0800 CST

模态窗口 + YouTube

  • 772

有一个模态窗口，其中有一个通过 iframe 插入的 YouTube 视频和一个关闭这个模态窗口的按钮。但是有一个错误，当这个模态窗口关闭时，视频继续在后台播放。我怎么能停止它并关闭它？？

模态窗口 HTML 代码：

<div class="modWindow">
        <div class="win">
            <img src="" alt="">
            <iframe src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat molestias alias, earum pariatur dolores illo quod voluptates iure rem deleniti?
            </p>
            <button class="btn btn-outline-danger" id="closeModWindow">Close</button>

        </div>
    </div>

模态窗口打开代码：


videoList.onclick = function(e){
    let target = e.target.closest("div");

    if(target.className != 'preview') return;

    modalWindow.querySelector("iframe").style.display = 'flex';
    modalWindow.querySelector("img").style.display = 'none'; //скрывать img в случае,если модальное окно вызывается для видео
    modalWindow.querySelector("iframe").src = target.dataset.videoSrc;
    modalWindow.style.display = 'flex';
};

模态窗口关闭代码：

buttonClose.onclick = function(){
    modalWindow.style.display = 'none';
};
javascript

2 个回答

  1. Best Answer

    这是它应该如何工作的：

     buttonClose.onclick = function(){
        modalWindow.querySelector("iframe").src = '';
        modalWindow.style.display = 'none';
 };
    • 1

  2. 要停止视频，您不需要“发明”一些方法......院子里的年龄是多少？......对......使用你所有的力量Javascript:)API通过添加k激活src ?enablejsapi=1，一切都将提供给你！工作示例jsfiddle- https://jsfiddle.net/ph7r5x39/

    这是一个工作示例：

    var customStopVideo = () => {
	var iframe = document.querySelectorAll('iframe');
	Array.prototype.forEach.call(iframe, iframe => {
		iframe.contentWindow.postMessage(JSON.stringify({
			event: 'command',
			func: 'stopVideo'
		}), '*');
	});
}



document.getElementById("closeModWindow").onclick = function () {
	customStopVideo();
};
    <div class="modWindow">
	<div class="win">
		<img src="" alt="">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/bnBX6YHgaeU?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat molestias alias, earum pariatur dolores illo quod voluptates iure rem deleniti?
		</p>
		<button class="btn btn-outline-danger" id="closeModWindow">Close</button>

	</div>
</div>

    这里威胁播放器被屏蔽了，为此我们看一下代码的工作jsfiddle

    • 1

相关问题