当前位置:  开发笔记 > 前端 > 正文

Internet Explorer中的全角背景视频

如何解决《InternetExplorer中的全角背景视频》经验,为你挑选了1个好方法。

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

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

视频拉伸的屏幕截图,用于填充Chrome中的容器宽度 视频无法在IE中填充容器的屏幕截图

链接到有错误的页面



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代码......

     

推荐阅读
jerry613
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有