HTML5视频标签 - 如何设置封面背景大小

Question

我正在尝试HTML5的视频标签，并且希望为其提供背景大小的封面属性。它没有拿这个财产。我已经给出width: 100%和height: 100%，视频也放在容器外面。

我该如何实现它？

Answer 1

CSS：

video#videoId{ 
position: fixed; right: 0; bottom: 0; 
min-width: 100%; min-height: 100%; 
width: auto; height: auto; z-index: -100; 
background-size: cover; 
} 

修复IE段：

<!--[if lt IE 9]> 
<script> 
document.createElement('video'); 
</script> 
<![endif]--> 

video { display: block; } 

Answer 2

我建议你把你的视频标记一个div包装内。
而不是看到视频变形，我更喜欢显示黑色背景。
DEMO.
通过这种方式，视频将适应其父div大小。

HTML

<div id="main"> 
    <video id="bunny" controls> 
    <source src="../video/video.mp4> 
    </video>  
</div> 

CSS

#main { 
    height: 300px; 
    width: 300px; 
    background-color: black; 
} 

#bunny { 
    width: 100%; 
    height: 100%; 
} 

Answer 3

我需要到中心的视频，并使用它作为背景，所以我清理和增强Jagu给出了答案。它现在可选择将视频居中，并具有可选的颜色叠加层。

现场演示：https://jsfiddle.net/prrstn/vn9L2h1w/

HTML

<div> 
    <!-- Optional attributes, remove the features you don't want. 
    Add the "controls" attribute to get the video player buttons --> 
    <video autoplay loop muted> 
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" /> 
    </video> 
</div> 

CSS

div { 
    /* This keeps the video inside the div */ 
    position: relative; 
    /* These are optional based on the size of 
    the area you want the video to cover */ 
    width: 100%; 
    height: 500px; 
    /* Color overlay on video, optional */ 
    background-color: rgba(0, 0, 0, 0.5); 
} 

video { 
    position: absolute; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    /* This puts the video BEHIND the div, optional */ 
    z-index: -1; 
    /* These two properties center the video, optional */ 
    left: 50%; 
    transform: translateX(-50%); 
}