html - 如何使用 CSS3 在 HTML5 视频上添加边框

Question

我正在构建一个带有居中视频的网站，问题是视频内部有黑线，一条在右侧，一条在左侧，它们并不大，但它们困扰着我和我的同事。

然后我想到在视频元素中放置一个与我的背景颜色相同的小边框，如下所示:

#vid {
position: float;
margin-top: 100px;
height: 480px;
width: 854px;
border: 3px solid #ECECEC;
box-sizing: border-box;
}

<video id="vid" loop autoplay autobuffer controls muted>
  <source type="video/mp4" src="http://www.mh-content.de/mh/video/MuH_Film_s_1.mp4">
  </source>
  <source type="video/webm" src="http://www.mh-content.de/mh/video/MuH_Film_s_1.webm"> 
  </source>
  <source type="video/ogg" src="http://www.mh-content.de/mh/video/MuH_Film_s_1.ogg"></source>
</video>

我从 this site 得到了 box-sizing 的提示.我上传了这个但是没有可见的边框。在没有视频的普通 div 框上测试它，它工作正常。我还尝试将视频放在一个额外的 div 容器中，并将 box-sizing: border-box 属性应用于容器，仍然看不到边框。

Link to my website

感谢任何帮助:)

Answer 1

位置元素不接受浮点值。请参阅http://www.w3schools.com/css/css_positioning.asp获取可接受的 css 值列表。

我不完全确定为什么你得到了反对票，除了 css 错误，我只能假设做这件事的人不明白视频中的边框是视频的一部分并且没有错你自己的。

以下解决方案将视频放在一个框内，该框由另一个带有边框的 div 构成。

.vid-border{
  position: relative;
  height: 480px;
  width: 854px;
  border: 5px solid black;
  overflow: hidden;
}
#vid {
  position: absolute;
  top:-5px;
  left:-5px;
  height: 480px;
  width: 854px;
}

<div class="vid-border">
    <video id="vid" loop autoplay autobuffer controls muted>
        <source type="video/mp4" src="http://www.mh-content.de/mh/video/MuH_Film_s_1.mp4">
        </source>
        <source type="video/webm" src="http://www.mh-content.de/mh/video/MuH_Film_s_1.webm">
        </source>
        <source type="video/ogg" src="http://www.mh-content.de/mh/video/MuH_Film_s_1.ogg"></source>
    </video>
</div>

调整视频边框框的宽度和高度以覆盖视频。