• かちびと.net

    Youtubeでもz-indexが効くようにする「?wmode=transparent」パラメーターをjQueryで自動挿入する。Youtube動画は通常z-indexが効きませんが、パラメーターを渡すことで効くようになります。これを手動でやるのは面倒なのでjQueryで挿入します。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

Youtubeでもz-indexが効くようにする「?wmode=transparent」パラメーターをjQueryで自動挿入する

スポンサーリンク

Youtubeは通常z-indexが効かず、Lightboxや
ナビゲーションをposition:fixed;させるときは
z-indexが効くように?wmode=transparentと
いうパラメーターを加えてあげなければなり
ません。しかしいちいち加えるのはストレス
なので、動画をよく貼るサイトにはjsで自動
的に挿入できるようにします。

Youtubeはデフォルトでは一番上に来てしまうのでLightboxなどのオーバーレイを実装するとなんとも情けない感じになってしまいます。これを回避するパラメーターがあるんですが、ブログ等で何度も動画を貼るサイトでは、毎回の手動挿入は面倒なのでjsで自動挿入しよう、というお話です。

jQueryである必要は無いんでしょうけど、僕はほぼ100%使うライブラリなのでjQueryで挿入します。
※表示されない場合はお手数ですがリロードお願いします

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が効きました。

既存のサイトにでも導入できるのでお困りでしたらお試しください。

URL :
TRB :

Comments & Trackbacks (10)

  1. kato masaru

    動画にz-indexが効かないので、参考にさせていただきました。

    例えば、YOUTUBEの古いコード(<object width="560"で始まるもの)にz-indexを効かせるには、どうしたらいいでしょうか?

    また、その場合、自動挿入はできますか?

    • シロ

      こんにちは。

      objectのコードに関しては以下に書いてありますー!要領は一緒です!
      http://www.koikikukan.com/archives/2006/03/17-021717.php

      自動挿入は、これも同じ要領で出来ると思いますのでトライしてみてください。

      記事のjQueryコードは

      「iframe要素のsrc内のURLの最後にパラメーターを付け足す」というコードです。

      • kato masaru

        ありがとうございます。

        何とかやってみたいと思います。

        • シロ

          頑張ってくださいー!シンプルな発想で出来るはずです!

  2. クロ

    こんばんわ。
    現在進行形で困っていた内容の記事なので、とても助かりました。
    一つ質問があるのですが、特定の要素のiframeだけを対象にjQueryで自動挿入したいのですが、
    その場合はどうすれば良いのでしょうか?回答よろしくお願いします。

    • シロ

      こんばんは。コメント有難う御座います

      特定の要素のiframeだけを対象にjQueryで自動挿入したい

      属性フィルタを使うと良いですー!以前書きましたのでご参照下さい。

      http://kachibito.net/web-design/selectors-filter-sample.html
      Attribute(属性フィルタ)の箇所です。

  3. クロ

    回答有り難うございます。記事を読ませてもらったのですが、
    私勉強不足で理解できない点があったのですが、
    例えば、内にあるiframeだけに
    適用する場合はどのような記述になるのでしょうか?

    • シロ

      例えばこの記事のサンプルではiframeのsrc属性でYoutubeのURLが貼られています。
      Youtubeだけに適応させるには

      $(‘iframe’).each(function()

      $(‘iframe[src*="youtube"]‘).each(function()

      としていすればいいかなと思います。これは

      「iframeのsrc属性内に『youtube』という文字列が含まれているもの」に限定させる、というフィルタのかけ方です。これを理解した上でもう一度先ほどの記事をご覧になってみてくださいー

  4. クロ

    シロさんの助言をもとに試したところ、無事問題を解決することができました。
    本当にありがとうございます。

    • シロ

      おお、良かったですー!属性フィルタはDOM操作を簡単に行えるのでとても便利です。ぜひご利用下さいー!

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services