Youtube视频div覆盖故障

Question

我正试图用div覆盖视频，因此它不可见。然后，当你将鼠标悬停在div上时，它的高度会缩小，让视频控件可见。

我不知道为什么会出现这种奇怪的故障：https://i.gyazo.com/aff58e50903009f7515a9cbd9b045f91.mp4

这是有问题的视频和叠加层的切片：

videoURL.absoluteString

这里的风格：

videoURL.path

整个内容都加载在ng-view中。

但无论如何，这里是所有源代码，我在github上托管它： https://github.com/Vacanor/gifsound

我希望有人指出为什么会这样。

PD：我不知道它是否有任何影响，但我使用的是flexbox

Answer 1

尝试用另一个div包装这些div，如下所示 -

<div class="main-cover">    
<div class="ytsound-cover" id="cover"></div>
<div id="ytsound">
    <iframe width="300" height="250" src="//www.youtube.com/embed/TbsBEb1ZxWA?autoplay=1&loop=1&playlist=TbsBEb1ZxWA&showinfo=0&start=65" frameborder="0" allowfullscreen></iframe>
</div>

</div>    

制作样式 -

.main-cover{
position:relative;
height:250px;
width:301px;
}
.ytsound-cover{
    background: #fff;
    height: 250px;
    position: absolute;
    width: 301px;
}
.main-cover:hover .ytsound-cover{
     height:205px
 }