Question

我正在构建一个小视频库，每个视频都有一个图标。点击后，它会打开一个带有嵌入式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，或者什么？在最初点击图标时能够自动播放视频也是一个巨大的好处，但目前并非绝对必要。

Answer 1

你应该阅读这篇文章：

Youtube api - stop video

告诉我你是否还有问题

使用onclick事件暂停/停止嵌入的YouTube视频？

1 个答案: