Question

我正在使用HTML5的全屏功能在iframe中展开youtube嵌入式视频。我需要做的是在全屏幕上显示另一个iframe与第一个上面的图像。我正在看z-index但没有成功。

代码示例：

<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;
  }

谢谢！

Answer 1

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

我猜这是Flash的问题，而不仅仅是YouTube。 Here是Stack Overflow的答案。

同一HTML5全屏幕上有两个iframe

1 个答案: