Flash に重なり順を指定する

Flash に z-index が効かない

HTMLで YouTube の埋め込み動画などの Flash を使用する場合、<object> タグを使うことになります。

で、いざ埋め込んでみると、このサイトのレイアウト上どうしても <div> タグが Flash に重ならなければならないのですが、CSSの z-index が効かずに、Flash が <div> の前面に来てしまいます。(div 同士が重ならないレイアウトにしても、隣接する限り border 部分に重なってしまいます。)

ためしに、<object> で jpg画像を埋め込んでみても同じようにはならないので、これは Flash 特有の性質のようです。

ということで、今回は <object> で埋め込んだ Flash に、重なり順を指定する方法について載せておきます。

なお、このサイトのレイアウトについては、擬似フレームについてのページへどうぞ。

param name="wmode" を使用する

結論から言うと、Flash の重なり順は、param name="wmode" を指定することで解決します。

この <param> は、<object> にパラメータとなる値を設定するためのタグで、今回は、wmode という値を name 属性に入れて使用します。

wmode は、背景の透明/不透明を設定する値で、この場合 value 属性に transparent(透明)/ opaque(不透明)のどちらかの値を入れます。

  • <param name="wmode" value="transparent" />
  • または
  • <param name="wmode" value="opaque" />

上記の記述のどちらかを <object> ~ </object> の間に入れることで z-index が適用され、重なり順どうりに表示されることになります。

なお、動画が読み込まれる前は、transparent は透過なので背景そのままに、opaque の場合は不透明となり、白い背景が表示されます。

追記:2011年11月29日

右側にある Amazon くるくるウィジェットも Flash を使用しているのですが、ウィジェットコード版では上記の方法で重なり順を指定できないので、以下のような変更が必要です。

  1. Amazon から表示の際に呼び出される swfobject_1_5.js というファイルを保存。
  2. そのファイル内の、下部にある swfObject.addParam(~); とある部分の最後に、以下の記述を追加。
    swfObject.addParam("wmode","opaque");
  3. 編集したファイルを、アップロードし、ウィジェットを表示する際に参照する src 属性の値を、アップロードしたファイルの場所に変更。

関連ページ:くるくるウィジェットの検索機能を使ってみた

<iframe> による埋め込みの場合

YouTube では、<iframe> による埋め込みもできますが、この場合 <param> が使用できないため wmode も指定できません。

これについては、どうしていいかわからなかったので、ググってみたらURLに ?wmode=transparent を加えることで適用できるようです。(URLの ? マークは、値を与えるという意味のようです。)以下のブログでより詳しく紹介されています。

参考サイト

スポンサードリンク

inserted by FC2 system