Youtubeは通常z-indexが効かず、Lightboxや
ナビゲーションをposition:fixed;させるときは
z-indexが効くように?wmode=transparentと
いうパラメーターを加えてあげなければなり
ません。しかしいちいち加えるのはストレス
なので、動画をよく貼るサイトにはjsで自動
的に挿入できるようにします。
Youtubeはデフォルトでは一番上に来てしまうのでLightboxなどのオーバーレイを実装するとなんとも情けない感じになってしまいます。これを回避するパラメーターがあるんですが、ブログ等で何度も動画を貼るサイトでは、毎回の手動挿入は面倒なのでjsで自動挿入しよう、というお話です。
jQueryである必要は無いんでしょうけど、僕はほぼ100％使うライブラリなのでjQueryで挿入します。
※表示されない場合はお手数ですがリロードお願いします
灰色の部分にはz-indexを指定していますが、普通にYoutubeを貼っても効いてくれません。これを効かせるために?wmode=transparentというパラメーターを使います。 2つ目のYoutubeは以下のようにパラメーターを使っているので下に配置できています。
先ほど手動でパラメーターを加えた2つ目の動画はパラメーターが2つ加わってしまった状態なので逆にアレですが、普通に貼ったYoutubeにはパラメーターが挿入されてz-indexが効きました。 既存のサイトにでも導入できるのでお困りでしたらお試しください。
z-indexが効かない
Resultか再生ボタン押してください。灰色の部分にはz-indexを指定していますが、普通にYoutubeを貼っても効いてくれません。これを効かせるために?wmode=transparentというパラメーターを使います。 2つ目のYoutubeは以下のようにパラメーターを使っているので下に配置できています。
<iframe width="420" height="345" src="http://www.youtube.com/embed/tT8jA_pps3o?wmode=transparent" frameborder="0" allowfullscreen></iframe>しかし、いちいち?wmode=transparentを手動で加えるのは面倒なので自動で挿入します。
コード
$('iframe').each(function(){
$(this).attr('src',$(this).attr('src')+'?wmode=transparent');
})
iframeオンリーですけどこれで挿入できますので普通にYoutubeを貼ればz-indexを使って要素の下にYoutubeを配置できます。
デモ
Resultか再生ボタン押してください。先ほど手動でパラメーターを加えた2つ目の動画はパラメーターが2つ加わってしまった状態なので逆にアレですが、普通に貼ったYoutubeにはパラメーターが挿入されてz-indexが効きました。 既存のサイトにでも導入できるのでお困りでしたらお試しください。