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事件？ 當圖標被初始點擊時，能夠自動播放視頻也是一項巨大的好處，但目前這不是絕對必要的。