如何使html5视频适合横幅

am working to add a video in the banner which need to be fit the Full width and Height of the banner. What am doing is follow

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

Html

HTML

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

CSS:

CSS：

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

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

}

Working fiddle : Fiddle

工作小提琴：小提琴

But video is not fit into banner

但视频不适合横幅

3 个解决方案

#1

Use object-fit: cover :

使用对象：封面：

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

See JSFiddle

见JSFiddle

#2

You need to set width: auto; to it solve your problem

你需要设置宽度：auto;它解决你的问题

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

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

}

Js fiddle demo http://fiddle.jshell.net/ypL0eym8/7/

Js小提琴演示http://fiddle.jshell.net/ypL0eym8/7/

#3

video {
    display: block;
    width: 100%;
    height: 566px;
    z-index: -100;
    background: cover;
    overflow: none;
}

Worked fine change background became "cover".

工作精细的变化背景变成了“掩护”。

http://fiddle.jshell.net/ypL0eym8/11/

** EDIT **

**编辑**

Nvm, take this answer instead. I was unaware of "object-fit" and it works much better.

Nvm，取而代之的是这个答案。我不知道“物体贴合”，它的效果要好得多。

#1