背景でYouTube動画をループ再生するjQueryプラグイン「jquery.mb.YTPlayer」

最近、サイトの背景にYoutubeなどの動画を入れるのが流行っているようです。
今回はjQueryのプラグインを利用してYouTubeの動画を背景に埋め込み、ループ再生する方法をご紹介します。
背景に動画を埋め込む方法は、HTML5のvideoタグの出現が大きく影響していると思いますが、videoタグで動画ファイルを読み込むのではありません。

jquery.mb.YTPlayer

使用するのは「jquery.mb.YTPlayer」というjQueryのプラグインです。
公式サイトはこちら。

GitHubはこちら。

プラグインを読み込む

ダウンロード先のリンクも貼りましたが、いつも通りJavaScriptをCDNで読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.1.5/jquery.mb.YTPlayer.min.js"></script>
<script>
$(function(){
    $("#bgndVideo").YTPlayer();
});
</script>

背景に動画を表示させる

HTMLタグに上記で指定したidを入力し、data-propertyにオプションを書きます。

<div id="bgndVideo" class="player" data-property="{
    videoURL:'
    containment: 'body',
    showControls: false}"></div>

jquery.mb.YTPlayerのサンプル

See the Pen jquery.mb.YTPlayer by JaSTIN (@JaSTIN) on CodePen.

オプションについて

videoURLの動画URLとcontainmentの表示したい場所は必ず設定すること。
showControlsでYouTubeコントローラを非表示にしています。
他はデフォルトで問題ないと思います。
ちょっと情報が古いみたいですが、オプションはこちらをご参照ください。

プロパティ	内容	初期値	パラメータ
videoURL	表示するYouTubeのURL（短縮 , ID可）		URL
containment	背景にYouTubeを表示する要素（’select’で自身）	‘body’	jQuery セレクタ / ‘selef’
mute	音声オフ	false	true / false
vol	音量（muteがfalse時のみ）		数値（1～100）
showControls	YouTubeコントローラ	true	true / false
loop	ループ回数	true	true / false / 数値
align	配置	‘center,center’	下図参照
startAt	開始点	0	数値（秒で指定）
stopAt	停止点（0で最後まで）	0	数値（秒で指定）
quality	品質	‘default’	‘default’ / ‘small’ / ‘medium’ / ‘large’ / ‘hd720’ / ‘hd1080’ / ‘highres’
autoPlay	自動再生	true	true / false
addRaster	ラスターイメージの表示	false	true / false
opacity	透過度	1	数値（0～1）

バージョンアップしてオプションが増えたようなので、もっと知りたい方は本家のドキュメント（英語）をご覧ください。

• Original:https://minory.org/jquery-mb-ytplayer.html
• Source:Minory
• Author:管理者

Amazonベストセラー