css - 在 Chrome 中调整视频的宽度以消除黑条

Question

使用 VideoJS 嵌入视频，由于控制器的高度，谷歌浏览器中的电影侧面出现了黑条。其他浏览器不会出现此问题。

想要隐藏控制器，除了翻转，或者找到调整宽度/高度的方法。当我通过 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;
}

Answer 1

该问题与代码或视频无关，而是与我在 Chrome 中安装的 DivX 插件有关。禁用它与其他一些问题一起解决了这个问题。