Question

我正在建立一个带有中心视频的网站，问题是视频内部左侧是黑色线条，它们不是很大但是它们让我和我的同事烦恼。“ / p>

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

#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

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

我不完全确定为什么你有一个downvote，除了css错误，我只能假设做了它的人，不明白视频中的边界是视频的一部分而且没有你自己的错。

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

使用vid-border框的宽度和高度进行播放以覆盖视频。

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

1 个答案: