Web制作

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

2017.11.18

2022.08.22

Written by o-saka

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

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