IEで埋め込みYouTube(iframe、objectタグ)をレイヤー(z-index)の下階層に表示する方法



YouTubeの埋め込み動画をヘッダ固定メニューの
ページで表示させると、ブラウザを下にスクロールした際にIEの場合、
固定メニューの上に埋め込み動画が表示されましたので、
それを固定メニューのレイヤー下に表示させてみます。

過去にEXPRESSION:IE6でCSSのPOSITION:FIXEDを無理やり実現させる方法
をご紹介しましたが、そのデモページのソースを流用してみます。

1.CSSの記述例

<style type="text/css">  
<!--
h1{
	font-size:16px;
	font-weight:normal;
	text-align:center;
	padding-top:10px;
	line-height:1.2em;
}
p{
	font-weight:bold;
	line-height:100%;
	font-size:12px;
}
#idWrap{
	width:800px;
	margin:0 auto;
}
#idKotei{
	width:100%;
	margin:0 auto;
	position:fixed;
	height:90px;
	text-align:center;
	background-color:#333;
	color:#FFF;
	font-size:16px;
}
* html div#idKotei {
    position: absolute;
    top: expression(eval(document.documentElement.scrollTop+0));
}
-->  
</style>

2-1.YouTube埋め込みコードの記述例

iframeタグ版

<iframe width="560" height="315" src="//www.youtube.com/embed/K3zV4V4jZTk?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>

srcのurl末尾に「&wmode=transparent」パラメータを追記します。

objectタグ版

<object width="560" height="315"><param name="movie" value="//www.youtube.com/v/K3zV4V4jZTk?version=3&amp;hl=ja_JP&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/K3zV4V4jZTk?version=3&amp;hl=ja_JP&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true" wmode="transparent"></embed></object>

embedタグに「wmode=”transparent”」を追記します。

2-2.HTML(iframe/objectタグ)の記述例

<div id="idKotei">
	<h1>固定ヘッダーのレイヤー(z-index)下にYouTubeの埋め込み動画を表示</h1>
	<p>※下にスクロールして見て下さい。</p>
</div><!--/idKotei-->

<div id="idWrap">

<div align="center">

    <p>IEだとレイヤーの上に動画が表示(iframeタグ版)↓</p>
    <iframe width="560" height="315" src="//www.youtube.com/embed/K3zV4V4jZTk?rel=0" frameborder="0" allowfullscreen></iframe>
    <br /> <br />
    
    <p>IEでもレイヤーの下に動画が表示(iframeタグ版)↓</p>
    <iframe width="560" height="315" src="//www.youtube.com/embed/K3zV4V4jZTk?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>
    <br /> <br />

    <p>IEだとレイヤーの上に動画が表示(objectタグ版)↓</p>
    <object width="560" height="315"><param name="movie" value="//www.youtube.com/v/K3zV4V4jZTk?version=3&amp;hl=ja_JP&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/K3zV4V4jZTk?version=3&amp;hl=ja_JP&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
    <br /> <br />
    
    <p>IEでもレイヤーの下に動画が表示(objectタグ版)↓</p>
    <object width="560" height="315"><param name="movie" value="//www.youtube.com/v/K3zV4V4jZTk?version=3&amp;hl=ja_JP&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/K3zV4V4jZTk?version=3&amp;hl=ja_JP&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true" wmode="transparent"></embed></object>

</div>



</div><!--/idWrap-->

<div style="height:10000px;">
</div><!--/高さを10000pxに指定-->

IEで埋め込みYouTube(iframe、objectタグ)をレイヤー(z-index)の下階層に表示させたデモ

要はパラメータ「wmode=”transparent”」を追加すれば良いだけですね。