Flashオブジェクトのz-index問題

現象

youtubeを以下のようにロードできる。

<iframe title="YouTube video player" width="450" height="368"
 src="http://www.youtube.com/embed/動画ID" frameborder="0" allowfullscreen></iframe>

こうした場合、読込んだFlashがz-indexを無視して一番上に表示される。

z-inex の有効化

Flash要素にz-indexを有効化させるには一般的に次のように指定する。

<object>
<param  name="wmode"  value="transparent">
<embed  src="…"  wmode="transparent"  />
</object>

iframe へのアクセス

youtubeの動画にz-indexを指定するため、まずはiframe内の要素へのアクセスを試みる。
iframeへのアクセスはjQueryの場合、以下のようにする。

// iframe
var trgt = $('iframeを要素に持つ親要素').find('iframe:first');
// 読込みを待ってiframe内要素にアクセス
_trgt.load(function(){
    // 要素取得
    // contents() でiframe内へ入ることが出来る
    $(this).contents().find('#対象要素').html('foo');
})

アクセスできません

上記iframeアクセスが出来るのは、同一ドメインのiframeのみ。
youtubeの動画を読込んだiframeにアクセスしようとすると、

permission denied for ******

としてアクセスすることが出来ない。
これはもう、どうしようもないので一時的にiframeを非表示することにした。
が、display で block させた際にもまたパーミッションのエラーが出力された。なんだい。もう。

苦肉の策でpositionをマイナス方向へ一気に飛ばして見えなくさせるようにした。
何か良い方法が無いものか。。。

4/15 追記

atsushi_h さんからの情報で、URLパラメタの指定によりz-indexが効くとの事でした。

?wmode=transparent

このパラメタをiframeのURLに追加するだけでよかったなんて。。。（atsushi_hさんありがとうございます）

調べてみたところ、色々なパラメタがあるようでした。

• • start : 再生開始位置(秒)
  • hd=1 : HD再生
  • autoplay=1 : 自動再生
  • loop=1 : ループ再生
  • rel=0 : 関連動画を表示しない
  • disablekb : キーボード操作（1:有効 0:無効）

youtubeが思いのほか素敵なインターフェースを持っていた事を知らなかった自分が情けないですね。
いやーyoutubeっていいものですねー