Chromeの変更Afterglow HTML5ビデオでマウスのホバー上のポスター画像

Question

私はAfterGlowのhtml5動画プレーヤーを使用しています。私はposter属性のサンプルビデオを作成しました。 Chromeブラウザを使用しているときに、マウスをビデオに重ねると、posterの画像がすぐに消えてから再び表示されます。それは私が欲しくない点滅効果を作り出します。これをどうやって止めるのですか？

<script src="https://cdn.jsdelivr.net/afterglow/latest/afterglow.min.js"></script> 
 
<div class="video-div"> 
 
    <div id="group_1" class="videoContainer"> 
 
    <video id="video_s08e01" poster="http://via.placeholder.com/566x318" class="afterglow" width="566" height="318" style="z-index:1;"> 
 
     <source type="video/mp4" src="https://www.w3schools.com/html/mov_bbb.mp4" /> 
 
    </video> 
 
    </div> 
 
</div>

ここJSFiddleです。 https://jsfiddle.net/zpo1cxbb/2/

Answer 1

ビデオ要素からstyle="z-index:-1"を削除するだけです。

JSFiddle