0

我正在使用 HTML5 的全屏功能在 iframe 中扩展 youtube 嵌入式视频。我需要做的是在第一个 iframe 的顶部显示另一个 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;
  }

谢谢！

4

1 回答 1

0

如果它是你所说的 youtube 视频，你可以通过在 iframe 代码（HTML 属性，而不是 CSS）中添加wmode=transparent, 或来解决它。wmode=opaque我之前遇到过这个问题，所以我找到了解决方案。类似的东西<iframe ... ... wmode=transparent>。

这实际上是 Flash 的问题，我猜不仅仅是 YouTube。 这是堆栈溢出的答案。

于 2013-03-27T18:00:26.323 回答