Question

我需要知道以下内容......

我有一个使用标签嵌入html的视频，我正在构建的页面正在使用z-index，想法是使用图层......一切都很好，直到媒体嵌入......

我有100％宽度和高度的全屏视频......

<style>
.bg_vid {
  position: absolute;
z-index 10;
w: 100%
h: 100%
}

.btns {
position: relative;
}
.btn-overlay-vid {
bg: url'img/pattern.png';
position: absolute;
z-index: 30;
}

.btn-video {
z-index: 25;
}
</style>


<div class="btns">
<div class="btn-overlay-vid"></div>
<div class="btn-video">
<object width="300" height="169">
<params name [...]> </params>
<params name [...]> </params>
<params name [...]> </params>
<params name="wmode" value="transparent" > </params>

<embed [...]&embed=transparent ></embed>
</object>
</div>

</div>
<div class="bg_vid">
<iframe [...] />
</div>

所以完整“屏幕”的背景视频工作正常，但是，按钮视频无效...我的意思是覆盖div仍然落后于现在这只发生在几乎所有浏览器上但谷歌Chrome ...谷歌浏览器运行良好...... 视频是叠加div后面的，这只是（现在）的图像，所以我想知道为什么在IE中（不出意外）和Firefox无法正常工作......

谢谢。

Answer 1

尝试给.btn-video一个位置，亲戚或其他东西。 z-index不喜欢未申报的职位。

Answer 2

我不得不更改我用于标记的Java ...通过这样做，我现在可以在我的使用＆amp; wmode = transparent，我想将iFrame发送到任何其他图层的背景...

<iframe 
class="behind" 
type="text/html" 
width="300" 
height="169"
src="https://www.youtube.com/embed/7SyAejEiiLw?autoplay=1&controls=0&loop=1&modestbranding=1&rel=0&showinfo=0&color=white&wmode=transparent" frameborder="0" allowfullscreen></iframe>

现在我可以像那个视频中的那些人一样跳舞......

注意：如果您想使用此演示中的“Params”，我建议您使用YouTube API，它将作为独立工作，但总是更好地使用API，更多控制通过YouTube播放器。

所以我的结论是永远不会限制HTML TAG，我为其他目的保留iframe标签，这样做我强迫我自己使用对象标签的媒体文件，也限制了我的网站的使用在平板电脑或智能手机等其他设备上，标签对这些设备不太友好。

将对象嵌入sfw发送到后面

2 个答案: