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