iframeを介して埋め込まれたYouTubeビデオz-indexを無視しますか？

水平マルチレベルドロップダウンナビゲーションメニューを実装しようとしています。メニューのすぐ下（垂直方向）に、iframeを介して埋め込まれたYouTubeビデオがあります。Firefoxのメインレベルのナビゲーション項目の1つにカーソルを合わせると、ドロップダウンメニューがビデオの上に正しく表示されます。

ただし、ChromeとIE9では、メニューとiframeの間にある小さなスペース領域に、ドロップダウンの一部しか表示されません。残りはiframeの背後にあるようです。

問題はiframe ではなく、YouTubeビデオに関連しているようです。テストするために、iframeをビデオではなく別のWebサイトに向け、ドロップダウンメニューはIEでも正常に機能しました。

• 質問1：WTF？
• 質問2：z-index:-999 !important; iframe に明示的にを配置しても、この問題が引き続き発生するのはなぜですか？

YouTubeの埋め込みコードに含まれている内部CSSはありますか？

wmodeを追加してみてください。2つのパラメーターがあるようです。

&wmode=Opaque

&wmode=transparent

私はそれが機能する技術的な理由、またはより多くの説明を見つけることができませんが、このクエリを見てください。

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">

またはこれ

//Fix z-index youtube video embedding
$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

Joshcの答えは正しい方向にありましたが、?rel=0クエリ文字列を完全に削除して、?wmode=transparent項目で元々はそうではありませんでしたが、再生の最後にYouTubeおすすめ動画リストが表示されます。これを実現させたい。

ように私は、コードを変更しsrc、埋め込みビデオの属性は、疑問符があるかどうかを確認するために、最初にスキャンされ?、これは、既存のクエリ文字列の存在、意味するので（すでにそこにありますようなものになる?rel=0が、理論的には可能性をYouTubeが将来追加することを選択したものである必要があります）。クエリ文字列がすでにある場合は、破棄しないで保持します。これは、このYouTube動画に貼り付けた人が選択した設定を表しており、おそらく理由のために選択したためです。

したがって、?が見つかった場合、は次wmode=transparentの形式を使用して追加され&mode=transparentます。既存のクエリ文字列の末尾にタグを付けるだけです。

?見つからない場合、コードは最初に実行されたのとまったく同じように動作し（toomanyairmilesの投稿）、?wmode=transparentURLに新しいクエリ文字列として追加されます。

これで、クエリ文字列としてYouTube URLの最後にあるものとないものに関係なく、それが保持され、必要なwmodeパラメータが挿入されたり、追加されたりして、以前の状態が損なわれることはありません。

document.ready関数にドロップするコードは次のとおりです。

$('iframe').each(function() {
  var url = $(this).attr("src");
  if (url.indexOf("?") > 0) {
    $(this).attr({
      "src" : url + "&wmode=transparent",
      "wmode" : "opaque"
    });
  }
  else {
    $(this).attr({
      "src" : url + "?wmode=transparent",
      "wmode" : "opaque"
    });
  }
});

これら2つのうちの1つをsrc urlに追加するだけです。

&wmode=Opaque

&wmode=transparent

<iframe id="videoIframe" width="500" height="281" src="http://www.youtube.com/embed/xxxxxx?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>

ただし、Internet ExplorerでのみYouTube iframe埋め込みに同じ問題があります。

Z-indexは完全に無視されていたか、フラッシュビデオが可能な限り高いインデックスで表示されていました。

これは私が使用したもので、上記のjqueryスクリプトをわずかに変更しました。

私の埋め込みコード、YouTubeから直接...

<iframe width="560" height="315" src="http://www.youtube.com/embed/QldZiR9eQ_0?rel=0" frameborder="0" allowfullscreen></iframe>

上記の答えから少し変更されたjQuery ...

$('iframe').each( function() {
    var url = $(this).attr("src")
    $(this).attr({
        "src" : url.replace('?rel=0', '')+"?wmode=transparent",
        "wmode" : "Opaque"
    })
});

基本的に、埋め込み設定で動画が終了したときに [ おすすめの動画を表示する]を選択しない場合、 URLの?rel=0末尾にがあります"src"。そこで、?rel=0存在する場合に備えて置換ビットを追加しました。それ以外の場合?wmode=transparentは機能しません。

?wmode=transparentYouTube URLの最後に追加するだけです。これにより、wmodeが設定された動画を含めるようにYouTubeに指示します。新しい埋め込みコードは次のようになります：-

<iframe width="420" height="315" src="http://www.youtube.com/embed/C4I84Gy-cPI?wmode=transparent" frameborder="0" allowfullscreen>

これだけが私のために働きました：

<script type="text/javascript">
var frames = document.getElementsByTagName("iframe");
    for (var i = 0; i < frames.length; i++) {
        src = frames[i].src;
        if (src.indexOf('embed') != -1) {
        if (src.indexOf('?') != -1) {
            frames[i].src += "&wmode=transparent";
        } else {
            frames[i].src += "?wmode=transparent";
        }
    }
}
</script>

私はそれをfooter.php Wordpressファイルにロードします。ここでコメントにコードが見つかりました （Gersonに感謝）

クエリ文字列の先頭のwmode = opaqueまたはtransparentは何も解決しませんでした。私にとってこの問題はChromeでのみ発生し、すべてのコンピューターで発生するわけではありません。1つのCPUのみ。vimeoの埋め込みでも発生しますが、他の埋め込みでも発生する可能性があります。

私が使用しているブートストラップモーダルの「表示」および「非表示」イベントにアタッチし、iframeを1x1ピクセルに設定するクラスを追加し、モーダルが閉じるときにクラスを削除するための私の解決策。動作しているようで、実装も簡単です。

回答の弓は実際には機能しませんでした。ラッパーでクリックイベントがあり、7、8、9、10はz-indexを無視していたため、私の修正はラッパーに背景色を与えていたので、突然動作しました。また、透明であると想定されていたので、ラッパーをbackground-color白で定義し、次に不透明度0.01で定義すると、動作します。上記の機能も兼ね備えているので、組み合わせも可能です。

なぜ機能するのかわかりませんが、本当に満足しています。

BigJackoのJavascriptコードは私にとってはうまくいきましたが、私の場合、最初にJQueryの「競合しない」コードを追加する必要がありました。これが私のサイトで機能した改訂版です。

<script type="text/javascript">
var $j = jQuery.noConflict(); 
jQuery(document).ready(function($j){
  $j('iframe').each(function() {
    var url = $j(this).attr("src");
      if ($j(this).attr("src").indexOf("?") > 0) {
        $j(this).attr({
          "src" : url + "&wmode=transparent",
          "wmode" : "Opaque"
        });
      }
      else {
        $j(this).attr({
          "src" : url + "?wmode=transparent",
           "wmode" : "Opaque"
        });
      }
   });
});
</script>

iframeに必要なものは次のとおりです。

...wmode="opaque"></iframe>

そしてURLで：

http://www.youtube.com/embed/123?wmode=transparent