iframe埋め込みでメニューなどと重なる、z-indexが効かない場合の対処方法
目次
そこに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が有効化されますので、メニューが上、動画が下の重なり順にすることができます。
サイト全体に自動化
また動画サイトなど１つ１つ動画URL末尾に「?wmode=transparent」書き込むのが面倒だという方はjavaScriptで自動化してしまう手もあります。javaScript
$('iframe').each(function(){
$(this).attr('src',$(this).attr('src')+'?wmode=transparent');
})
スポンサードリンク
コメントを書き込む