Internet Explorer中的全角背景视频

Question

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

视频应该在宽度方向上拉伸以填充容器 - 保持视频比例,但是,IE只是将视频放在容器中,其大小必须垂直填充容器.

链接到有错误的页面

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>

Answer 2

你可以使用这个我希望它对你有用:)

 This is html code :
 <div class="video-frame">
<video class="video-box" autoplay  poster="video-back.jpg" id="bgvid" loop>
<source src="sample.webm" type="video/webm">
<source src="sample.mp4" type="video/mp4">
</video>
</div>

This is css code :
.video-frame { position:relative;margin:40px auto;width:100%;}
.video-box { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) translateY(-50%); background: url('video-back.jpg') no-repeat; background-size: cover; transition: 1s opacity;}