全宽背景视频作为 IE 中的横幅？答案

【问题标题】：Full width background video as banner in IE?全宽背景视频作为 IE 中的横幅？
【发布时间】：2019-10-21 15:52:57
【问题描述】：

这是我目前的代码...

.video-box{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	min-height: 100%;
	min-width: 100%;
	-webkit-transform-style: preserve-3d;

}
.video-box video{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	min-height: 100%;
	min-width: 100%;
	height: auto;
	width: 100%;
	object-fit: cover;
}

  <div class="video-box">
    <video autoplay muted loop>
      <source src="../videos/spark.mp4" type="video/mp4">
    </video>
   </div>

我想做的是：

我正在尝试添加背景视频作为横幅，它在 chrome 和 Firefox 中支持，但在 Internet Explorer 中不支持？怎么做？

【问题讨论】：

标签： html css internet-explorer

【解决方案1】：

您需要使用哪个 IE 版本？

尝试将<meta http-equiv="X-UA-Compatible" content="IE=Edge"/> 添加到您的HTML 文件的<head> 部分。

【讨论】：

【解决方案2】：

我尝试在 IE 11 浏览器中测试您的上述代码，发现您的代码运行良好。

这是测试结果：

<!doctype html>
<html>
<head>
<title>video demo</title>
<style>
.video-box{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	min-height: 100%;
	min-width: 100%;
	-webkit-transform-style: preserve-3d;

}
.video-box video{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	min-height: 100%;
	min-width: 100%;
	height: auto;
	width: 100%;
	object-fit: cover;
}
</style>
</head>
<body>
<div class="video-box">
    <video autoplay muted loop>
      <source src="https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4">
    </video>
   </div>
</body>
</html>

我建议你尝试在你的 IE 浏览器中运行这个例子，看看它是否工作正常。

如果您使用的是任何旧版本的 IE，建议升级到 IE 11 版本。

【讨论】：