• かちびと.net

    Youtube動画を透過(opacity)できるjQueryプラグイン・YTPLAYERのご紹介です。Youtube動画を半透明にしたり、オート再生、オートリピートも出来るみたいです。

    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動画を透過(opacity)できるjQueryプラグイン・YTPLAYER

スポンサーリンク

あまり見かけないタイプのライブラリだった
のでメモ。Youtubeの動画を透過させる事
が出来るjQueryプラグインです。インター
フェースもクールにされて全画面に配置した
りオート再生させたりも可能でIE6や7でも
一応は動作してくれます。

僕はちょっと知らないんですけど、Youtubeって普通は透過出来ない、で合ってますよね?普通に出来るならちょっと恥ずかしい記事ですけどw

透過だけでなく、オート&リピート再生、ミュート設定も出来て、見た目もスッキリさせてくれています。以前はYoutube動画を背景にするjQueryプラグインをご紹介しましたが、今回は透過が出来るプラグイン。いろいろ出来るんですね・・

CPUの問題は否めないとして、これはちょっと素敵なので覚えておきたいです。透過のみに関してはIE6や7にも対応していますが、Operaは透過出来ませんでした。バージョンにもよるんですかね・・

YTPLAYER


上記は全画面に指定した際のキャプチャです。動画が透過されているのが確認出来るように、背景に木目使いました。

背景木目で、その上にテキスト、更に透過させた動画をオーバーレイのように重ねてあります。


こちらは手動で再生させるタイプです。インターフェースも、すっきりと綺麗な仕上がりです。マウスを乗せると再生ボタンやタイムバーが表示されますよ。

Chromeが一番動作良かったです。以下にデモを2つ作ったので宜しければ御覧ください。

IEで確認


IETesterでのIE7のキャプチャです。テキストが一番手前に来てしまいますが、再生と透過に問題はありません。IE6だとテキストが下方に表示されてしまいます。工夫すればなんとかなるかな・・(未検証

コード

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.metadata.js"></script>
  <script type="text/javascript" src="jquery.mb.YTPlayer.js"></script>
  <script type="text/javascript">
    $(function(){
      $(".movie").mb_YTPlayer();
    });
  </script>

コードです。jQuery本体とプラグインを読み込んで動画のURLに指定するセレクタを書く。

マークアップ

  <a id="bgndVideo" href="http://www.youtube.com/watch?v=u46eaeAfeqw" class="movie {opacity:.3, isBgndMovie:{width:'window',mute:true}, ratio:'16/9',quality:'default'}">Minilogue/hitchhikers choice</a>

マークアップがちょっと特殊で、class名に透過の度合いや無音処理等のオプションを指定するみたいですね。設定値は見れば大体分かると思います。

ライセンスはGPLとMITのデュアルライセンスです。必要ないのに使いたくなりますねこれ・・感覚が新鮮で楽しいwライブラリのダウンロードは以下よりどうぞ。

YTPLAYER

URL :
TRB :

Comments & Trackbacks (2)

Twitter

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

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

twitter facebook rss contact

Ads

Posts

Contact

Services