VideoJS を使用してビデオを埋め込むと、コントローラーの高さが原因で、Google Chrome のムービーの横に黒いバーが表示されます。この問題は、他のブラウザーでは発生しません。
ロールオーバー以外でコントローラーを非表示にするか、幅/高さを調整する方法を探しています。CSS を使用して幅または高さを調整すると、デフォルトでコントローラーを非表示にする他のブラウザーで間隔の問題が発生します。
スクリーンショット:
HTML の抜粋:
<div id="movieLayer">
<div id="movie">
<video id="abacus_holiday_video" class="video-js vjs-holiday-skin" loop autoplay controls
preload="auto" width="640" height="360" poster="my_video_poster.png"
data-setup="{ }" style=" width: 640px; height:360px;">
<source src="abacus_holiday.mp4" type='video/mp4'>
</video></div>
</div>
CSS の抜粋:
#movieLayer {
position: relative;
width: 640px !important;
height: 360px !important;
margin: 80px auto 0px;
border: 10px solid #fff;
-webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, .1);
box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, .1);
}
#movie {
position: relative;
width: 640px;
background-color: #000;
}