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

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

記事がお気に召しましたらシェアお願いします!

関連記事