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

我正在建立一个带有居中视频的网站，问题在于视频内部的黑色线条是左侧的右侧，它们并不是真的很大，但他们正在窃听我和我的同事。如何在CSS3的HTML5视频上添加边框

然后，我有铺设具有相同颜色的微小的边框作为我的视频元素中的背景是这样的想法：我与box-sizing尖端从this site

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

。我上传了这个，但没有边框可见。在没有视频的普通div盒上进行测试，效果很好。我也尝试将视频放在额外的div容器中，并将 box-sizing: border-box属性应用于容器，但仍无可见边框。

Link to my website

任何帮助理解:)

来源

2014-09-23 E_Kricheldorf

有人可以解释-1对我有问题吗？ – 2014-09-23 16:31:16

位置元件不接受浮子的值。请参阅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>

播放与VID-边界框覆盖视频的宽度和高度。

来源

2014-09-23 16:58:13

非常感谢您将立即尝试:) – 2014-09-23 17:41:49

您是否发现该解决方案有助于回答您的问题？ – 2014-09-24 15:55:49

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

回答

相关问题