使用 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;、"Scale the background to be as large as possible so that the background is completely covered by the background image [video]."

background-size 支持： - Chrome：4.0+ - IE9 - 火狐：4.0+ - 野生动物园：4.1+ - 歌剧：10.5

Updated fiddle

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

Full Screen Layered Videos Using Z-Index

css

html

video

z-index