web-dev-qa-db-ja.com

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

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

ただし、ChromeおよびIE9では、メニューとiframeの間にあるスペースの小さな領域にドロップダウンのスライバーのみが表示されます。残りは後ろ iframeのようです。

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

  • 質問1：WTF？
  • 質問2：なぜ、iframeにz-index:-999 !important;を明示的に配置したとしても、この問題は依然として発生しますか？

YouTube埋め込みコードに含まれている内部CSSがあり、それが何らかの形でオーバーライドされていますか？

cssiframeyoutube
128
user249493

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");
    });
});
243
toomanyairmiles

Joshcの答えは正しい軌道に乗っていたが、?rel=0クエリ文字列を完全に削除し、?wmode=transparentアイテムで置き換えることがわかりました。 YouTubeのおすすめ動画は、元々これが発生することを望まなかった場合でも、再生の最後に一覧表示されます。

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

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

?が見つからない場合、コードは（toomanyairmilesの投稿で）元とまったく同じように機能し、新しいクエリとして?wmode=transparentだけを追加します。 URLへの文字列。

これで、クエリ文字列として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"
    });
  }
});
28
BigJacko

次の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>
6
Code.Town

ただし、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"
    })
});


基本的に、埋め込み設定でビデオの終了時に推奨ビデオを表示を選択しない場合、?rel=0 URLの最後に"src"があります。そこで、?rel=0が存在する場合に備えて、置換ビットを追加しました。そうしないと、?wmode=transparentは機能しません。


5
Joshc

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

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

これだけが私のために働いた：

<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に感謝）

2
dragoeco

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

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

およびURL内：

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

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

私が使用しているbootstrapモーダルの 'shown'および 'hidden'イベントにアタッチし、iframeを1x1ピクセルに設定するクラスを追加し、モーダルが閉じるときにクラスを削除する私の解決策。動作し、実装が簡単なようです。

1
Danny

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>
1
cclay

答えは本当にうまくいきませんでした。ラッパーでクリックイベントが発生しました。つまり、7,8,9,10はz-indexを無視しました。そのため、私の修正はラッパーに背景色を与え、突然動作しました。 。それは透明であると想定されていましたが、ラッパーを背景色白で定義し、不透明度0.01で定義し、今では動作します。上記の機能もあるため、組み合わせて使用​​することもできます。

私はそれがなぜ機能するのか分かりません、ただ幸せです。

1
eduardo