如何使用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>

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

链接到我的网站

任何帮助表示赞赏:)

Answer 1

position元素不接受float值.请参阅http://www.w3schools.com/css/css_positioning.asp以获取已接受的css值列表.

我不完全确定为什么你有一个downvote,除了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>

播放视频边框的宽度和高度以覆盖视频.