0

HTML5 の全画面表示機能を使用して、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コード(CSSではなくHTML属性)にwmode=transparent, or , を追加することで解決できます。wmode=opaque私は以前にその問題を抱えていたので、解決策を見つけました。のようなもの<iframe ... ... wmode=transparent>。

これは実際には Flash の問題であり、YouTube だけの問題ではないと思います。 これがStack Overflowからの回答です。

于 2013-03-27T18:00:26.323 に答える