簡単に使える！！youtube動画の全画面背景jQuery
今日も覚え書き・・・
たまーに動画を全画面背景にしたい時ってありますよね。
そんな時、あんまり時間をかけないでサクッと使えるjQueryプラグインがあればなあ…と思っていたところ、ありました。
JQUERY.MB.YTPLAYER
使い方を見て貰えれば簡単だと思います。
まず、一式をgithubからダウンロード
あとは簡単！
head内に下記コードを入れます。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script> <script type="text/javascript" src="js/jquery.mb.YTPlayer.js"></script>
※ファイルパスはご自身の環境に合わせて変更してください。
次に下記コードも追加
<script>
$(function(){
$(".player").mb_YTPlayer();
});
</script>
あとはbody内に下記コードを入れるだけ！
<a id="bgndVideo" class="player" data-property="{videoURL:'youtube動画のURL',containment:'body',autoPlay:true, quality:'hd1080', loop:true, mute:true, startAt:0, opacity:0.6}">My video</a>
色々とパラメータがありますので公式サイトで確認してみてください。
ひとつサンプルを作ってみたのでぜひ！
サンプルページへ
※音が出ますので注意してください。またスマートフォン、タブレットには対応していません。
