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

『jquery.mb.YTPlayer』の最もシンプルな設置方法をご紹介いたします!

jquery.mb.YTPlayerとは

Youtubeの動画を背景に表示するためのjQueryです。ホームページ全体でもdivの中でも表示可能です。ループ回数やボリュームなど細かい設定が可能です。モバイル端末、レスポンシブデザインにも対応しています

設置方法

下記ソースをコピーペーストするだけで使用できます。

<head>内

&amp;amp;lt;link rel=&amp;amp;quot;stylesheet&amp;amp;quot; href=&amp;amp;quot;//cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.1.2/css/jquery.mb.YTPlayer.min.css&amp;amp;quot; /&amp;amp;gt;

</body>の直前

&amp;amp;lt;script src=&amp;amp;quot;//code.jquery.com/jquery-3.0.0.min.js&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/script&amp;amp;gt;
&amp;amp;lt;script src=&amp;amp;quot;//cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.1.2/jquery.mb.YTPlayer.min.js&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/script&amp;amp;gt;
&amp;amp;lt;script&amp;amp;gt;
jQuery(function(){
  jQuery(&amp;amp;quot;#bgndVideo&amp;amp;quot;).YTPlayer();
});
&amp;amp;lt;/script&amp;amp;gt;

html

背景全体に表示する場合

&amp;amp;lt;div id=&amp;amp;quot;bgndVideo&amp;amp;quot; class=&amp;amp;quot;player&amp;amp;quot; data-property=&amp;amp;quot;{videoURL:'https://youtu.be/BsekcY04xvQ'}&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;

デモ

divの背景に表示する場合

&amp;amp;lt;div id=&amp;amp;quot;bgndVideo&amp;amp;quot; class=&amp;amp;quot;player&amp;amp;quot; data-property=&amp;amp;quot;{videoURL:'https://youtu.be/BsekcY04xvQ',containment:'self'}&amp;amp;quot; style=&amp;amp;quot;height:400px;width:600px;&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;div&amp;amp;gt;test&amp;amp;lt;/div&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;

デモ

オプションの設定

オプション一覧

プロパティ説明パラメーター
 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”>

デモ

&amp;amp;lt;div id=&amp;amp;quot;bgndVideo&amp;amp;quot; class=&amp;amp;quot;player&amp;amp;quot; data-property=&amp;amp;quot;{videoURL:'https://youtu.be/BsekcY04xvQ',mute:true,showControls:false,opacity:0.5,containment:'#bgv'}&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;
&amp;amp;lt;div id=&amp;amp;quot;bgv&amp;amp;quot; style=&amp;amp;quot;height:400px;width:600px;&amp;amp;quot;&amp;amp;gt;
  &amp;amp;lt;div&amp;amp;gt;test&amp;amp;lt;/div&amp;amp;gt;
&amp;amp;lt;/div&amp;amp;gt;

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

関連記事