サイトアイコン IT NEWS

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

管理者
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音声オフfalsetrue / false
vol音量（muteがfalse時のみ） 数値（1～100）
showControlsYouTubeコントローラtruetrue / false
loopループ回数truetrue / false / 数値
align配置‘center,center’下図参照
startAt開始点0数値（秒で指定）
stopAt停止点（0で最後まで）0数値（秒で指定）
quality品質‘default’‘default’ / ‘small’ / ‘medium’ / ‘large’ / ‘hd720’ / ‘hd1080’ / ‘highres’
autoPlay自動再生truetrue / false
addRasterラスターイメージの表示falsetrue / false
opacity透過度1数値（0～1）
jquery.mb.YTPlayerのオプション一覧

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

モバイルバージョンを終了