logo标签列表

在Internet Explorer中实现全宽度背景视频

internet-explorerhtml5-videowebm
7
我正在设计一个网站，使用自托管的背景视频在100％宽度的容器中。在Chrome和Firefox中运行得非常完美，但在IE（已测试在IE 11）中则失败了。
视频应该横向拉伸以填充容器 - 保持视频比例，然而，IE只是将视频放置在容器中，以垂直方向填充容器所需的大小。

Screenshot of video stretching to fill container width in Chrome Screenshot of video failing to fill container in IE

链接到页面错误

尝试在 HTML 的头部区域添加一个元标签：<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>。 - yjs
5个回答
8
/*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;
}

抱歉，我只能接受英语文本的翻译任务。
     <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>
4
您可以使用这个，希望对您有用 :)
 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;}
3

已解决

我在IE中遇到了同样的宽度问题：我找到的解决方法是删除应用于<video>标签上的额外自定义CSS。

这段代码应该可以正常工作：

<!DOCTYPE html>
<html>

<body>

<video width="100%" height="" autoplay>
  <source src="http://sawyerfirm.ignitte.com/wp-content/uploads/2015/12/Girl-Riding-In-Car-8-BW.mp4" type="video/mp4">  
  Your browser does not support the video tag.
</video>

</body>

</html>

然后尝试删除应用在您标签上/内部的任何额外类/样式。
1
答案看起来没问题。但“cover”在哪里？ - E.Coms
object-fit: cover 可以作为 Firefox 和 Chrome 的 CSS 属性使用，但它不适用于 IE。 - rvirk
1
在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 */
    }
}

在IE中：
.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 */
    }
}

还有HTML代码：

<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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接