css - 视频元素上出现不需要的边框

Question

我试图摆脱这个视频周围的边框http://bit.ly/ZihaJV这个想法是视频在没有边框的白色背景上播放。问题可能是由于视频的比例和播放器的大小。

我也找到了这篇文章，但它并没有解决问题。我什至无法访问 Flash 来编译 swf。videojs禁用黑色背景

在视频周围使用带有白色边框的 a 来隐藏出现的黑线可能是一种解决方法，但我遇到了一个问题，因为视频需要响应。

实际网页显示的边框比这个测试的要多。对不起，我不能显示原件。

谢谢，欢迎任何帮助。

Answer 1

在您链接到的视频中，视频顶部的边框线是视频文件本身的一部分，因此这是原始文件或您编辑它的方式的问题。（我经常在视频中遇到这个问题。很烦人。）

使用 CSS 的快速视觉修复是将视频的顶部向上拉一点并隐藏顶部的行：

.video-js .vjs-tech {
    top: -2px;
}

.video-js {
    overflow: hidden;
}

但是，是的，这有点厚脸皮。

Answer 2

我在 ralph.m 评论之后最终整理出来的方式如下：

.video-js .vjs-tech {
  /* make the video larger so it can hide*/
  width: 102%;
  height: 102%;
  /* displace video to hide*/
  left: -5px;
  /* allow space for hiding*/
  margin: -10px;
  position: absolute;
  top: 0;
}

.video-js {
  /* make sure overflow is hidden*/
  overflow: hidden; 
}