Internet explorer Internet Explorer中的全宽背景视频

我正在设计一个网站，使用一个100%宽度的容器中的自托管背景视频。在Chrome和Firefox中工作完美，但在IE中失败惨重（在IE11中测试）

视频应该沿宽度方向拉伸以填充容器-然而，保持视频比例，即简单地将视频以垂直填充容器所需的大小放置在容器中

---

你可以用这个，我希望它对你有用：）

这是html代码：
这是css代码：
.视频帧{位置：相对；边距：40px自动；宽度：100%；}
.视频框{位置：固定；顶部：50%；左侧：50%；最小宽度：100%；最小高度：100%；宽度：自动；高度：自动；z索引：-100；变换：translateX（-50%）translateY（-50%）；背景：url（'video-back.jpg'）不重复；背景大小：封面；过渡：1s不透明度；}

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>

解决

我在IE中遇到了同样的宽度问题：我找到的解决方案是删除应用在

标记上的附加自定义css

这么多代码应该可以工作：

您的浏览器不支持视频标记。

对象配合：IE不支持封面。请使用以下库，作为IE的后备：

---

在IE上，将视频高度设置为自动

在其他浏览器上：

.video {

    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;

    /* HTML video tag */
    &__player, video {

        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* IE not work */
    }
}

.video {

    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;

    /* HTML video tag */
    &__player, video {

        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: auto; /* IE change to auto */
    }
}

<div class="video">
    <video class="video__player" width="400" muted loop>
        <source src="XXX" type="video/mp4">
        Your browser does not support HTML5 video.
    </video>
</div>

关于IE:

.video {

    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;

    /* HTML video tag */
    &__player, video {

        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* IE not work */
    }
}

.video {

    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;

    /* HTML video tag */
    &__player, video {

        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: auto; /* IE change to auto */
    }
}

<div class="video">
    <video class="video__player" width="400" muted loop>
        <source src="XXX" type="video/mp4">
        Your browser does not support HTML5 video.
    </video>
</div>

和HTML:

.video {

    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;

    /* HTML video tag */
    &__player, video {

        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* IE not work */
    }
}

.video {

    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;

    /* HTML video tag */
    &__player, video {

        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: auto; /* IE change to auto */
    }
}

<div class="video">
    <video class="video__player" width="400" muted loop>
        <source src="XXX" type="video/mp4">
        Your browser does not support HTML5 video.
    </video>
</div>

您的浏览器不支持HTML5视频。

尝试在标题部分的html上添加元标记。。答案似乎不错。但是“cover”从哪里来呢？对象适合：cover可以用作firefox和chrome的css属性，但它不适用于IE