我有一个视频，我想在 iFrame 上播放，然后在播放结束后将其删除，但我无法让视频显示在 iframe 上。有什么诀窍吗？我已经尝试过 CSS z-index 但它没有帮助。我有这样的代码:
<html>
<head>
<title>Enormous Wedding III</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class = "container"><span>
<div id = "game"><iframe src='...'></div>
<div id = "video"><video autoplay> <source src="menu.mp4" type="video/mp4">
</video></div>
</span></div>
<script>
var video = document.getElementsByTagName('video')[0];
var game = document.getElementsByTagName('iframe')[0];
video.onended = function(e) {
video.style.display = "none";
};
</script>
</body></html>
还有一个 CSS 文件:
html, body, .container {
height: 100%;
}
.container {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}
#game {
z-index: 1;
}
#video {
z-index: 2;
}
为什么它不起作用？如何让视频显示在 iframe 的顶部？
最佳答案
在子元素上使用position: absolute;，在父元素上使用position: relative;。
.container {
position: relative;
}
iframe {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
video {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
z-index 要求将位置设置为相对、绝对或固定。通过使用绝对位置，您可以将元素放在相对位置树的下一个元素中您想要的位置，在本例中为 .container
示例 jsfiddle shows this in action
关于html - 分层 iframe 和视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31055744/