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

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

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

3 个答案: