让video宽高撑满父级

开发中大量使用了video标签，video标签比较有个性，就算你设置了固定的宽高，它依然会根据其中一个属性来自己缩放，所以总会出现空白间隙，如何使video能够自适应的撑满整个父级容器呢。

这里可以给video样式加上 object-fit：cover；属性 如此video即可实现自适应宽高

外层的父级样式
.initial-video{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #000;
    z-index: 3;
}
video适应父级的样式
.initial-video video{
     width: 100%;
     height: 100%; 
     object-fit: cover;
}

object-fit有以下几个属性

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。

contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。

cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。

none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。

scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

object-fit属性是完全不兼容ie的，ie8可以引入http://api.html5media.info/1.1.8/html5media.min.js解决，所以object-fit尽管用

张鑫旭地址