1. TOP
  2. CSS
  3. iframe埋め込みでメニューなどと重なる、z-indexが効かない場合の対処方法

iframe埋め込みでメニューなどと重なる、z-indexが効かない場合の対処方法

目次

ランディングページ(以下LP)でスマホのバーガーサイドメニューをposition:fixed使って導入していました。
そこにYoutube動画をiframeを使って埋め込んだのですが。
メニューより上に動画が来てしまいメニューが見えなくなってしまいました。
重なりはz-indexを使用し重なりの順番を指定すればいいのですが

失敗例

HTML側で
<iframe width="640" height="360" src="youtubeの埋め込みURL" frameborder="0" allowfullscreen></iframe>

CSS側でiframeを
iflame{
z-index: 0!important;
}
CSSでメニューをiflameで指定した重なり順よりよりも大きい数字に
menu{
z-index: 1!important;
}
としてもこの状態だとZ-indexが効かずメニューより後面にいってくれません。


対処方法は下記

スポンサードリンク

対処方法は

iframe要素に動画のURL末尾に「?wmode=transparent」を追加すると、z-indexでの重なり順の指定が有効になります。

HTML
<iframe width="640" height="360" src="youtubeの埋め込みURL?wmode=transparent" frameborder="0" allowfullscreen></iframe>
これで上記で書いたCSSのz-indexが有効化されますので、メニューが上、動画が下の重なり順にすることができます。

サイト全体に自動化

また動画サイトなど1つ1つ動画URL末尾に「?wmode=transparent」書き込むのが面倒だという方はjavaScriptで自動化してしまう手もあります。
javaScript
$('iframe').each(function(){
$(this).attr('src',$(this).attr('src')+'?wmode=transparent');
})

スポンサードリンク

コメントを書き込む

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。