1
我正在建立一个小视频库，其中每个视频都有一个图标。点击后，会打开一个包含嵌入式YouTube iframe的灯箱。灯箱右上角还有一个X可以关闭它。下面是CSS的一个简化版本：通过onclick事件暂停/停止嵌入的YouTube视频？
.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，然后添加一个getElementById调用x按钮onclick事件，以将该ID的显示属性更改为隐藏和无，但都没有工作。
我是JavaScript的新手，但有没有一个函数，我可以添加到我的X按钮，将暂停或停止视频，或像“重置”IFRAME或什么的onclick事件？ 当图标被初始点击时，能够自动播放视频也是一项巨大的好处，但目前这不是绝对必要的。