4

同じページで Twitter Bootstrap Modal と Youtube Video を使用しています。Chrome ブラウザのモーダル ウィンドウの上にビデオが表示される Z-Index 問題に直面しています。

この問題を解決するにはどうすればよいですか?

http://mink7.com/projects/cmrc/home.html

ここに画像の説明を入力

4

5 に答える 5

12

?wmode=transparent パラメータで YouTube の URL を使用する必要があります。

<iframe src="http://www.youtube.com/embed/EBSnWlpTPSk?wmode=transparent"></iframe>

object/embed タグを含める場合は、<param name="wmode" value="opaque" />object タグwmode=transparent用、embed タグ用に追加する必要があります。

于 2012-12-25T15:13:27.973 に答える
5

あなたがあなたのページに置いたYouTubeビデオはフラッシュベースです。Flashオブジェクトは、HTML5スタックの一部ではないため、ウィンドウの上部に個別にレンダリングされます。Z-indexはこれらに影響を与えません。

たとえば、http ：//www.google.com/search？q = flash+z-indexを参照してください。

于 2012-05-15T05:10:37.043 に答える
1

Fatihが提案したように、解決策は合格することwmode=transparentです。IFrame API については、以下を使用しました。

var player = new YT.Player(pContainer, {
            height: 300,
            width: 400,
            videoId: contentID,
            playerVars : {wmode: "transparent"},
            events: {
                ...
                }
            }
});
于 2014-02-10T06:49:06.350 に答える
0

OBJECT メソッドは非推奨になりました:

https://developers.google.com/youtube/player_parameters

于 2015-07-01T10:10:29.093 に答える
0

これは簡単に修正できます。

使用する：

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

object タグ内。

<object title="YouTube video player" width="480" height="390"   
data="http://www.youtube.com/embed/EBSnWlpTPSk"  
frameborder="0" wmode="Opaque">  
<param name="wmode" value="opaque" />
</object>
于 2015-04-22T10:29:19.400 に答える