Javascript/jQuery 视频弹出窗口答案

【问题标题】：Javascript/jQuery video Pop-upJavascript/jQuery 视频弹出窗口
【发布时间】：2016-05-08 10:14:18
【问题描述】：

我使用 Javascript 和 jQuery 制作了一个视频弹出窗口，它运行良好，设计需要一些工作，但它很好，因为它只是一个草稿......

我遇到的唯一问题是，当我单击关闭按钮时，视频会停止，但它会在后台继续播放。这是代码。

HTML：

    <body>
<div id="play">
<button>Play Video</button>

<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
</div>

<div id="vid">
<iframe width="640" height="360" src="https://www.youtube.com/embed/VNtYWDpdQ1w?list=PLr6-GrHUlVf96NLj3PQq-tmEB6woZjwEl" frameborder="0" allowfullscreen id="video"></iframe>
<a href="#"><h1 id="close">X</h1></a>
</div>
</body>

CSS：

#video{
position: absolute;
top: 200px;
bottom: 400px;
left: 400px;
right: 400px;
display: none;
}
#close{
font-family: arial;
color: black;
position: absolute;
top: 100px;
left: 250px;
display: none
}

Javascript/jQuery：

$(document).ready(function(){
$('#play').click(function(){
$('#video').css('display', 'block');
$('#video').css('position', 'fixed');
$('#close').css('position', 'fixed');
$('#close').css('display', 'block');
$('#play').css('opacity', '0.5');
});
});

$(document).ready(function(){
$('#close').click(function(){
$('#play').data('clicked', 'no');
$('#video').css('display', 'none');
$('#close').css('display', 'none');
$('#play').css('opacity', '1');
});
});

【问题讨论】：

Stop embedded youtube iframe?的可能重复

标签： javascript jquery html css

【解决方案1】：

不久前我也面临同样的问题。解决方案很简单，需要在 id=vid 中附加 iframe 并在关闭时将其空白。

<div id="vid">
<span id="frame"></span>
<a href="#"><h1 id="close">X</h1></a>
</div>

$(document).ready(function(){
$('#play').click(function(){
$('#frame').html('<iframe width="640" height="360" src="https://www.youtube.com/embed/VNtYWDpdQ1w?list=PLr6-GrHUlVf96NLj3PQq-tmEB6woZjwEl" frameborder="0" allowfullscreen id="video"></iframe>');
$('#video').css('display', 'block');
$('#video').css('position', 'fixed');
$('#close').css('position', 'fixed');
$('#close').css('display', 'block');
$('#play').css('opacity', '0.5');
});
});

$(document).ready(function(){
$('#close').click(function(){
$('#frame').html('');
$('#play').data('clicked', 'no');
$('#video').css('display', 'none');
$('#close').css('display', 'none');
$('#play').css('opacity', '1');
});
});

【讨论】：

如果需要更多帮助，请告诉我。
感谢 Deepak，这对我很有帮助！