HOME > WEB > jQuery > 背景にYoutube動画を流す!『jquery.mb.YTPlayer』を設置する一番簡単な方法

背景にYoutube動画を流す!『jquery.mb.YTPlayer』を設置する一番簡単な方法

folder_open label_outline
背景に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>

いかがでしたでしょうか。背景動画は視覚的なインパクトが強いのでコーポレートサイトなどで効果的に活用できるかと思います。