jQuery：『jquery.mb.YTPlayer』でコンテンツの背景にYoutubeの動画を設定する

だま
だま

ホームページのコンテンツに動画を使用したい時、videoタグやYoutubeをよく利用するかと思われます。

今回は、jQueryプラグイン『jquery.mb.YTPlayer』でYoutubeにアップロードした動画をコンテンツの背景に設定する方法を紹介します。

YouTubeAPIを利用して実装する方法もありますが、今回はjQueryプラグインでサクっと実装してみます。

使い方

まずは『jquery.mb.YTPlayer』プラグインをダウンロードします。

jquery.mb.YTPlayer GitHubページ（外部リンク）

「jquery.mb.YTPlayer-master.zip」を解凍して「jquery.mb.YTPlayer.min.js」をhtmlファイルへ読み込みます。

<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/jquery.mb.YTPlayer.min.js"></script>

html

動画を囲う親要素を作成し、その中に動画を呼び出す要素を設置します。

今回は動画の上に「電脳職人村」の文字も入れてみます。

<div class="video-container">
	<p>電脳職人村</p>
	<div id="videoPlay" data-property="{ videoURL: '●●●●', containment: '.video-container', autoPlay: true, loop: 1, mute: true, startAt: 30, showControls: false, showYTLogo: false}"></div>
</div>

動画の呼び出し設定は一例ですが、下記のように記載します。

<div class="video-container"> //動画を囲う親要素
	<p>電脳職人村</p>
	<div id="videoPlay" //動画の呼び出し要素
		data-property="{
			videoURL: '●●●●', //動画ID、またはURL
			containment: '.video-container', //動画を囲う親要素を指定
			mute: true, //音声ミュート
			loop: true, //ループ再生
			autoPlay: true, //自動再生
			startAt: 30, //動画を何秒の地点から再生するか
			showControls: false, //動画のコントロールナビゲーションを非表示
			showYTLogo: false //Youtubeロゴや動画URLへのリンクを非表示
		}">
	</div>
</div>

CSS

動画を囲う親要素に"width"、"height"、"position: relative"を設定します。

/* 動画を囲う親要素 */
.video-container{
	width: 100%;
	height: 600px;
	position: relative;
}
/* 動画の上に乗せる文字 */
.video-container > p{
	width: 300px;
	height: 3rem;
	margin: auto;
	text-align: center;
	letter-spacing: 0.2em;
	font-size: 40px;
	font-size: 4rem;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

jQuery

あとはjQueryを記述するだけで完成！

<script>
	$(function() {
		$('#videoPlay').YTPlayer(); //動画の呼び出し部分に指定したID
	});
</script>

上記のように実装してみると、こんな感じになります。都合によりGIFアニメーションです。
※ものすごくvery very とってもキュートなワンちゃんの動画は社員さんが提供してくれました。ありがとうございます！！！

サンプルGIF

動画のオプションをほぼHTML側で指定する仕様上、jQueryの記述がとってもシンプルなのでまだjQueryはそんなに詳しくないけど...という人でも導入しやすいと思います。

公式ページにたくさんオプションが記載されているので、もっとカスタマイズしたい！という場合は要チェックです。

jquery.mb.YTPlayer GitHubページ（外部リンク）

関連記事