Youtube video div overlay glitch

Question

divでビデオをカバーしようとしています。その後、divの上にマウスを置くと、ビデオコントロールが表示されるように縮小されます。

私はこの奇妙なグリッチを取得する理由を私は知らない：https://i.gyazo.com/aff58e50903009f7515a9cbd9b045f91.mp4

は、これが問題の動画とオーバーレイとスライスです：ここ

 <div class="ytsound-cover" ng-class="{'ytsound-cover-lower': hover, 'ytsound-cover': !hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false" 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> 

スタイル：

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

全体がng-view内に読み込まれます。ここ

しかし、いずれにせよは、すべてのソースコードですが、私はgithubの上でそれをホストしている： https://github.com/Vacanor/gifsound

は、私はいくつかの理由が起こっているの方を向いてみたいです。

PD：それは何の効果も持っていませんが、私は同じように、別のdivによってこれらのdivをラップしようとフレキシボックスに

Answer 1

を使用する場合、私は知りませんbelow-

<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>  

メイクスタイル

like-

.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 
}