FacebookのiframeにあるYouTube - Z-indexの問題

私はFacebookのアプリにYoutubeビデオを埋め込んだことがありますが、下にスクロールすると、YouTubeのビデオがfacebookmenu-barの上に浮かびます。一見ひどいと思われる、スクリーンショットを参照してください。

At first glance, the problem only shows in Chrome and Internet Explorer, not in Firefox. It seems to be a Z-index issue. I've tried adding &wmode=Opaque to my youtube-url, but no luck.

誰かがこの問題を抱えていましたか?もしそうなら、あなたはそれを解決するために何をしましたか?

enter image description here

4

3 答え

問題は埋め込みのYouTubeフレームです。 URLのクエリ文字列にこれを追加して、正しく機能させる必要があります。

wmode = transparent

あなたは次のようなものを手に入れます:

www.youtube.com/embed/xxxxxxxxx?wmode = transparent&rel=0

それは、他のすべてのウィンドウやモーダルの上に座っている埋め込みのYouTubeビデオのZインデックスの問題を修正します。

8
追加された
それもうまくいくと思ったけど、それはしない
追加された 著者 samn,
私はまだ関連するCSSはありませんが、これは私のPHPコードです:echo " youtube.com/v/&hellip "type = 'application/x-shockwave-flash' allowfullscreen = 'true'を入力してください:" version = 3&feature = player_detailpage&wmode = transparent' rel = "nofollow noreferrer"> youtube.com/v/… 'allowScriptAccess =' always 'width =' 520 'height =' 317 '> ";
追加された 著者 samn,
あなたのコメントをありがとう、私は解決策を見つけた。実際には?wmode = transparentまたはopaqueのパラメータですが、これはオブジェクトでは機能しません。オブジェクトをiframeに変換することはやりました。助けてくれてありがとう!
追加された 著者 samn,
マークアップとCSSを追加できますか?
追加された 著者 Mike_K,
コメント内の表示制限のためにリンクを読むことはできませんが(私ができるなら役立つでしょう)、私は100%確信していませんが、このオブジェクト表記法では、映画価値=リンクがあるので、名前= 'allowFullScreen'の別のエンティティ(param?)の場合、name = 'wmode'とvalue = 'transparentに設定されている別のパラメータ(または、私が見ることができないコードで何が起こっているか) '?
追加された 著者 Mike_K,

私はこれが突然すべてのビデオ埋め込みに起こっているので、これは新しいFacebookのバグだと思う。ポスターを修正したり微調整したりする必要はありません。

1
追加された
これは、YouTube動画がオブジェクトとして埋め込まれている場合にのみ発生します。ビデオをiframeとして埋め込み、?wmode = transparentを埋め込みURLに追加すると、修正されます。
追加された 著者 samn,
$(document).ready(function(){
    var frames = document.getElementsByTagName("iframe");

    for (var i = 0; i < frames.length; i++) {
         frames[i].src += "?wmode=opaque";
    }
});

このコードは私のために働く。

1
追加された