Javascript 暂停/停止带有onclick事件的嵌入式YouTube视频？

我正在建立一个小视频库，每个视频都有一个图标。单击会打开一个带有嵌入式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之类的？

---

如果能够在最初点击图标时自动播放视频，这将是一个巨大的奖励，但目前这并不是绝对必要的。

您应该阅读以下文章：

告诉我你以后是否还有问题