あまり見かけないタイプのライブラリだった
のでメモ。Youtubeの動画を透過させる事
が出来るjQueryプラグインです。インター
フェースもクールにされて全画面に配置した
りオート再生させたりも可能でIE6や7でも
一応は動作してくれます。
僕はちょっと知らないんですけど、Youtubeって普通は透過出来ない、で合ってますよね？普通に出来るならちょっと恥ずかしい記事ですけどｗ
透過だけでなく、オート&リピート再生、ミュート設定も出来て、見た目もスッキリさせてくれています。以前は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のデュアルライセンスです。必要ないのに使いたくなりますねこれ・・感覚が新鮮で楽しいｗライブラリのダウンロードは以下よりどうぞ。