Javascript HTML5视频标签-如何设置封面背景尺寸

我正在尝试HTML5的视频标签，并希望为其提供背景大小的封面属性。它不会拿走那笔财产。我给了宽度：100%和高度：100%，视频也放在容器外面

如何实现它？

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

CSS:

修正第IE段：

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

video { display: block; }

---

我建议你把你的视频标签放在一个div包装里。 与其看视频变形，我更喜欢显示黑色背景。 这样，视频将适应父div大小

HTML

---

我建议你把你的视频标签放在一个div包装里。 与其看视频变形，我更喜欢显示黑色背景。 这样，视频将适应父div大小

HTML

我需要将视频居中，并将其用作背景，因此我清理并增强了Jagu提供的答案。它现在可以选择将视频居中，并具有可选的颜色覆盖

现场演示：

HTML

我需要将视频居中，并将其用作背景，因此我清理并增强了Jagu提供的答案。它现在可以选择将视频居中，并具有可选的颜色覆盖

现场演示：

HTML

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

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

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

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%);
}