youtubeの動画を背景に利用できるjQueryプラグイン

簡単に動画を背景として利用できるjQueryプラグイン「jquery.mb.YTPlayer」を使ってみた。

設置方法
■js

JavaScript

jQuery(function(){ jQuery( '.player' ).mb_YTPlayer(); });

1
2
3

jQuery(function(){
jQuery( '.player' ).mb_YTPlayer();
});

■html

XHTML

<a id="P2" class="player" data-property="{videoURL:'54dhAKNxu6c',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1, showYTLogo:false, showControls:false}"></a>

1

<a id="P2" class="player" data-property="{videoURL:'54dhAKNxu6c',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1, showYTLogo:false, showControls:false}"></a>

パラメータ	データ型	デフォルト	用途	使用方法
videoURL	string	–	対象動画	youtubeの動画IDを指定※
opacity	int	1	透明度	0〜1の数値を指定
mute	bool	true	音	音の有無を指定
showControls	bool	true	コントローラー	コントローラーの表示の有無を指定
ratio	string	4/3	アスペクト比	4/3若しくは16/9を指定
quality	string	default	画質	default、small、medium、large、hd720、hd1080、highresを指定
containment	string	–	出力場所	CSSセレクタで指定
optimizeDisplay	bool	true	画面フィット	画面サイズにフィットさせるか否か
loop	bool	true	ループ	ループの有無を指定
vol	int	–	ボリューム	1〜100で指定
startAt	int	0	開始位置	開始秒を指定
autoplay	bool	true	自動再生	自動再生の有無を指定
showYTLogo	bool	true	youtubeロゴ	ロゴ及びオリジナルへのリンクの有無を指定