是否可以制作背景：封面;效果为<video> </video>标记并居中吗？

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

但请注意，该属性目前为incompatible with IE/Edge。