同一HTML5全屏幕上的两个内联框架

我使用HTML5的全屏功能在iframe中展开嵌入式视频。我需要做的是在全屏幕上显示另一个带有第一个图像的iframe。我在看z-index但没有成功。同一HTML5全屏幕上的两个内联框架

代码示例：

<iframe src="smiley.png" id="image"></iframe> 

<!-- 1. The <iframe> (and video player) will replace this <div> tag. --> 
<div id="player" align="center"></div><br> 
<button onclick="goFullscreen('player'); return false">Fullscreen</button>

而且（JavaScript的去全屏）：

function goFullscreen(id) { 
     // Get the element that we want to take into fullscreen mode 
     var element = document.getElementById(id); 

     if (element.mozRequestFullScreen) { 

     element.mozRequestFullScreen(); 
     } else if (element.webkitRequestFullScreen) { 

     element.webkitRequestFullScreen(); 
    } 
    }

最后（CSS）：

.iframeclass { 
     position: absolute; 
     top: 0; left: 0; 
     width:100%; 
     height:100%; 
    } 
    iframe.image { 
    position: relative; 
    left:50px; 
    top:50px; 
    z-index: 3; 
    } 
    iframe.player { 
    position: relative; 
    left:50px; 
    top:50px; 
    z-index: 1; 
    }

谢谢！

来源

2013-03-27 Oscar_Mariani

如果是youtube视频，您可以通过在iframe代码（HTML atrtributes，而不是CSS）中添加wmode=transparent或wmode=opaque来解决此问题。我之前有这个问题，所以我找到了解决方案。类似于<iframe ... ... wmode=transparent>。

这实际上是Flash的问题，而不是YouTube，我想。 Here是Stack Overflow的答案。

来源

2013-03-27 18:00:26 ceruleus

同一HTML5全屏幕上的两个内联框架

回答

相关问题