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

2018年3月29日2022年8月4日

URLをコピーしました！

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

jquery.mb.YTPlayer

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

Matteo Bicocchi

All my artworks - Matteo Bicocchi I'm a creative dreamer in all directions. Artworks, paintings, drawings, videos, photos. Born in Florence, Italy in 1968.

GitHubはこちら。

GitHub

GitHub - pupunzi/jquery.mb.YTPlayer: use a custom yutube player for a video as background on jQuery ... use a custom yutube player for a video as background on jQuery framework - pupunzi/jquery.mb.YTPlayer

プラグインを読み込む

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

cdnjs

jquery.mb.YTPlayer - Libraries - cdnjs - The #1 free and open source CDN built to make life easier f... This plugin let you play any public YouTube video as background of your page. It can also be used as a customized player in page. - Simple. Fast. Reliable. Cont...

$(function(){

$("#bgndVideo").YTPlayer();

});

</script>

背景に動画を表示させる

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

<div id="bgndVideo" class="player" data-property="{

videoURL:'https://www.youtube.com/watch?v=_ybv4L4gcVU',

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）