是否可以制作背景:封面；效果<视频></视频>标签和居中？

Question

是否有可能使background:cover;效应的<video></video>标签和居中？

我试过，就像图像一样，但它不起作用。我认为这是因为视频标签不是<div>的背景，但是如何使它工作呢？或者如何做到这将是背景视频？

​

<div class="" style="width:90%; 
height:300px; border:1px solid red;
background-color:blue; background-size:cover;
 margin:0 auto; ">
<video width="100%" style="margin-top:-100px;" controls autoplay loop muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>

​

Answer 1

视频标记与background-image的等效属性是object-fit。

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

但是，请注意，该属性当前为与IE/Edge不兼容。