javascript - 如何使 html5 视频适合横幅

Question

我正在努力在横幅中添加一个视频，该视频需要适合横幅的全宽和高度。正在做的是follow

HTML

 <div class="banner">
  <video>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
 </div>

CSS:

video {
    display: block;
    width: 100%;
    height: 566px;
    z-index: -100;

}
.banner{
  width: 100%;
  height: 566px;
  background: red;
  overflow: none;

}

工作 fiddle :Fiddle

但视频不适合横幅

Answer 1

使用 object-fit: cover :

video {
    display: block;
    width: 100%;
    height: 566px;
    z-index: -100;
    object-fit: cover;
}

参见 JSFiddle