背景にYoutube動画を流す！『jquery.mb.YTPlayer』を設置する一番簡単な方法
『jquery.mb.YTPlayer』の最もシンプルな設置方法をご紹介いたします！
jquery.mb.YTPlayerとは
Youtubeの動画を背景に表示するためのjQueryです。ホームページ全体でもdivの中でも表示可能です。ループ回数やボリュームなど細かい設定が可能です。モバイル端末、レスポンシブデザインにも対応しています
設置方法
下記ソースをコピーペーストするだけで使用できます。
<head>内
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.1.2/css/jquery.mb.YTPlayer.min.css" />
</body>の直前
<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.1.2/jquery.mb.YTPlayer.min.js"></script>
<script>
jQuery(function(){
jQuery("#bgndVideo").YTPlayer();
});
</script>
html
背景全体に表示する場合
<div id="bgndVideo" class="player" data-property="{videoURL:'https://youtu.be/BsekcY04xvQ'}"></div>
divの背景に表示する場合
<div id="bgndVideo" class="player" data-property="{videoURL:'https://youtu.be/BsekcY04xvQ',containment:'self'}" style="height:400px;width:600px;">
<div>test</div>
</div>
オプションの設定
オプション一覧
| プロパティ | 説明 | パラメーター |
|---|---|---|
| mute | ミュートのON / OFF | true / false |
| showControls | コントローラーの表示/非表示 | true / false |
| mobileFallbackImage | モバイル端末の場合代替画像を表示 | 画像の絶対パス |
| ratio | 縦横比 | ‘4/3’, ‘16/9’,‘auto’ |
| quality | クオリティ | ‘default’,‘small’, ‘medium’, ‘large’, ‘hd720’, ‘hd1080’, ‘highres’. |
| opacity | 透過 | 0～1 |
| containment | 表示箇所 | body,self,セレクタ |
| optimizeDisplay | ディスプレイ最適化 | true |
| loop | ループ | false / 数値 |
| vol | ボリューム | 1 to 100 |
| startAt | 開始位置 | 20 |
| stopAt | 停止位置 | 20 |
| remember_last_time | ページ推移時の再生時間設定 | true |
| autoPlay | 自動再生 | true |
| showYTLogo | ロゴ表示 | true |
| addRaster | ラスターイメージ表示 | false |
| mask | マスク | ‘path/to/mask’等 |
| realfullscreen | フルスクリーン再生 | true |
| stopMovieOnBlur | フォーカスが外れたとき一時停止 | true |
| gaTrack | 動画のAnaltycsの設定 | true |
| anchor | ウンドウサイズ変更時の動作 | ceter,center’ 等 |
| showAnnotations | アノテーション表示 | false |
| onReady | 動作時の関数 | (function) |
| onError | エラー時の関数 | (function) |
詳細はこちら：github pupunzi/jquery.mb.YTPlayer
オプション設定例
読み込みたい動画のURL：https://youtu.be/BsekcY04xvQ
音声：ミュート
コントローラー：非表示
透過：50%
表示箇所：<div id=”bgv”>
<div id="bgndVideo" class="player" data-property="{videoURL:'https://youtu.be/BsekcY04xvQ',mute:true,showControls:false,opacity:0.5,containment:'#bgv'}"></div>
<div id="bgv" style="height:400px;width:600px;">
<div>test</div>
</div>
いかがでしたでしょうか。背景動画は視覚的なインパクトが強いのでコーポレートサイトなどで効果的に活用できるかと思います。
