同じページで Twitter Bootstrap Modal と Youtube Video を使用しています。Chrome ブラウザのモーダル ウィンドウの上にビデオが表示される Z-Index 問題に直面しています。
この問題を解決するにはどうすればよいですか?
同じページで Twitter Bootstrap Modal と Youtube Video を使用しています。Chrome ブラウザのモーダル ウィンドウの上にビデオが表示される Z-Index 問題に直面しています。
この問題を解決するにはどうすればよいですか?
?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 タグ用に追加する必要があります。
あなたがあなたのページに置いたYouTubeビデオはフラッシュベースです。Flashオブジェクトは、HTML5スタックの一部ではないため、ウィンドウの上部に個別にレンダリングされます。Z-indexはこれらに影響を与えません。
たとえば、http ://www.google.com/search?q = flash+z-indexを参照してください。
Fatihが提案したように、解決策は合格することwmode=transparent
です。IFrame API については、以下を使用しました。
var player = new YT.Player(pContainer, {
height: 300,
width: 400,
videoId: contentID,
playerVars : {wmode: "transparent"},
events: {
...
}
}
});
OBJECT メソッドは非推奨になりました:
これは簡単に修正できます。
使用する:
<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>