web-dev-qa-db-ja.com

z-indexとiFrames！

サイトの画像の一部に FancyBox プラグインを使用しています。私のページの1つには、YouTubeの埋め込みiFrameコードもあり、ページにビデオを配置しています。

この同じページにはサムネイルがあり、クリックすると画像がFancyBoxesされます。ただし、埋め込まれたYouTubeビデオはまだFancyBox画像の上にあります。 Z-Indexの実験を少ししましたが、まだ運がありませんでした。

I-frameは、z-indexなどが設定されている場合でも、ページ内のすべての要素よりも上位にありますか？

htmliframez-index
33
cqde

パラメーターとしてwmode = transparentを追加します。

HTMLソリューション

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

jQueryソリューション：

$(document).ready(function () {
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

ソース http://www.scorchsoft.com/news/youtube-z-index-embed-iframe-fix

37
Simonini

一言で言えば、はい。ただし、YouTube動画はFlashです。 FlashはZオーダーよりも上位にあります。 IFRAMEにあるかどうかに関係なくオーバーレイします。

IFRAMEとFlashは「重い」オブジェクトです。これらには独自のウィンドウマネージャーオブジェクト（WindowsではHWND）があるため、他のヘビーウェイトオブジェクトの前または後ろにあります。

div、spanなどは「軽量」です。つまり、それらは描画オブジェクトであり、ボディ（重量のあるオブジェクト）に描画され、ウィンドウマネージャではなくブラウザによって管理されます。

オペレーティングシステムのウィンドウマネージャーに関する限り、これらはブラウザーによって描画された単なるきれいな画像です。そのため、「実際の」オブジェクト（またはウィンドウマネージャーが実際に考えるオブジェクト）をオーバーレイできません。

すべてのDIVとSPANとAがOSリソースを予約しなければならない場合、ウィンドウマネージャーがすぐに使い果たされるため、軽量でなければなりません。

13
Ben

非常に簡単です。iframeのURLにこのパラメーターを追加するだけです。

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

がんばろう！

4
DomingoSL

他のHTML要素と同じz-indexルールに従ってFlashアプレットをレンダリングする場合は、含まれているFlashのWMODE属性を設定する必要があります。

見る：

  1. http://www.communitymx.com/content/article.cfm?cid=E5141
  2. Webページの埋め込みオブジェクトにwmode = "transparent"、 "opaque"、または "window"を使用することの違い
4
DuckMaestro

これをIE（少なくとも7と8）で動作させるには、これを追加する必要があります。

<param name="wmode" value="transparent" />

これをiframe URLに追加する方法があるとは思わないので、コンテンツにはおそらくオブジェクトタグの間にこれが必要です。

0
Calydon

うーん、ここでの問題は、Flash要素を制御できないことです。基本的には、タグのみを含むYouTubeサイトから埋め込みiFrame HTMLをプルするだけです。したがって、WMODEを設定することはできません。属性

遅い答えですが、はい、できます。 yt URLに？wmode = opaqueを付加するだけです。

<iframe src="http://www.youtube.com/embed/vRH3Kq5qDw4?wmode=opaque".............
0
matt