Question

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

HTML

    1111  'true
And 0001  '1
And 0010  '2
-------------
    0000  '0 -> evaluates to false when cast as boolean

    1111 'true
And 0010 '2
And 0011 '3
-------------
    0010 '2 -> evaluates to true when cast as boolean

CSS：

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

工作小提琴：Fiddle

但视频不适合横幅

Answer 1

使用object-fit: cover：

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

请参阅JSFiddle

Answer 2

你需要设置宽度：自动;解决你的问题

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

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

}

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

Answer 3

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

工作良好的变化背景变成了“掩护”。

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

**编辑**

Nvm，取而代之的是this。我没有意识到“物体贴合”，它的效果要好得多。

如何使html5视频适合横幅

3 个答案: