internet-explorer - Internet Explorer 中的全角背景视频

Question

我正在设计一个在 100% 宽度的容器中使用自托管背景视频的网站。在 Chrome 和 Firefox 中完美运行，但在 IE 中惨遭失败(在 IE 11 中测试)。

视频应该横向拉伸(stretch)以填充容器 - 保持视频比例，但是，IE 只是将视频以垂直填充容器所需的大小放置在容器中。




Link to Page with Error

Answer 1

/*you can use this css.*/

.fullwidth-video {
position: absolute;
top: 0;
left: 0;
z-index: 1;
min-height: 100%;
min-width: 100%;
-webkit-transform-style: preserve-3d;
}
.fullwidth-video video {
position: absolute;
top: 0;
left: 0;
z-index: 1;
min-height: 100%;
min-width: 100%;
height: auto;
width: 100%;
object-fit: cover;
}

html代码在这里...

     <div class="fullwidth-video">
     <video preload="auto" autoplay loop muted="">
       <source src="http://sawyerfirm.ignitte.com/wp-content/uploads/2015/12/Girl-Riding-In-Car-8-BW.mp4" type="video/mp4">
       <source src="http://sawyerfirm.ignitte.com/wp-content/uploads/2015/12/Girl-Riding-In-Car-8-BW.webm" type="video/webm">
     </video>
     </div>