css - 使用 Z-Index 的全屏分层视频

Question

我目前正在处理一个元素，我需要将 2 个或 3 个视频叠加在一起。我已经能够使用 Flash 以及使用 html5 视频标签和 Z 索引的视频来做到这一点，但是当我按 F11 进入全屏时，我只能看到第一个视频，即应该有的第一层上面的分层视频。我的元素的标准要求在 f11 时我的元素在构建层时启动。我尝试为我的前 2 个视频提供一个超高的 z-index，我认为它可以工作，但没有骰子。

我制作了一个 fiddle ，其中有 1 个视频设置为背景，2 个位于顶部。这再次起作用，直到我按 f11 进入全屏。它似乎只是在所有 z 索引之上渲染底部或背景视频。

https://jsfiddle.net/lukeslytalker/j1ssLqvj/2/

HTML

<div id="over">
<video autoplay loop>
    <source src="minion1.mp4"></source>
</video>
</div>
<div id="over2">
<video autoplay loop>
    <source src="minion2.mp4"></source>
</video>
</div>
<video autoplay loop id="myvideo">
<source src="152_0030.mp4"></source>
</video>

CSS

body { 
margin:0; 
padding:0; 
overflow:hidden; 
}
#over {
position: absolute;
left: 0px;
top: 0px;
z-index: 10005; 
}
#over2 {
position: absolute;
left: 0px;
top: 0px;
z-index: 10000; 
}

Javascript

<script>
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
</script>

Answer 1

看起来你已经弄清楚了 z-index 部分，如果我没理解错的话，你希望视频是全宽的？

这可以使用 background-size 样式来完成。

video{ 
background-size:cover;
/*vendor prefixes*/
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
/*sizing*/
width:100%;
margin:0 auto;
display:block;
}

这针对每个视频，说 background-size:cover;，“将背景缩放到尽可能大，以便背景完全被背景图像覆盖 [视频] ”

background-size 支持:- Chrome :4.0+- IE9- 火狐:4.0+- Safari :4.1+- 歌剧:10.5

Updated fiddle