我正在构建一个小视频库，每个视频都有一个图标。点击后，它会打开一个带有嵌入式YouTube iframe的灯箱。灯箱的右上角还有一个X来关闭它。这是CSS的简化版本：
.lightBox { width: 646px; height: 405px; z-index: 1001; }
#video1Box { display: none; }
.playIcon { width: 100px; height: 100px; }
#video1Icon { background-image: blah blah blah; }
#video1Icon:hover { background-image: blah blah blah 2 }
iframe { display: block; margin: 15px auto; }
.x-button { position: absolute; top: 5px; right: 5px; }
...和html：
<div class="playIcon" id="video1Icon" onclick="document.getElementById('video1Box').style.display='block';"></div>
<div class="lightBox" id="video1Box">
<iframe width="640" height="360" src="//www.youtube.com/embed/myvideo" frameborder="0" allowfullscreen></iframe>
<div class="x-button">
<a href="javascript:void(0)" onclick="document.getElementById('video1Box').style.display='none';">X</a>
</div>
</div>
现在几乎所有东西都完美无缺。您单击图标，灯箱弹出，视频在其中正确显示，视频播放正常，当您单击X时，灯箱消失。唯一的问题是视频的声音一直在播放。
我尝试给iframe提供自己的ID，然后在x-button onclick事件中添加一个getElementById调用，将Id的display属性更改为hidden和none，但都没有工作。
我是javascript的新手，但有一个功能我可以添加到我的x按钮的onclick事件，它会暂停或停止视频，或者像“重置”iframe，或者什么？ 在最初点击图标时能够自动播放视频也是一个巨大的好处，但目前并非绝对必要。