[jQuery]YouTube動画をサイトに埋め込む方法2(ブラウザの高さにfit)

Posted on 2017年7月28日

前回、YouTube Player APIを利用した動画の埋め込み方法をまとめました。だた、レスポンシブは可能なのですがブラウザ全面にフィットする動画の表示はできませんでした(方法が分からないだけかも…)。そんな時に便利なのが、jQueryのプラグイン「YTPlayer」です。

今回も、とりあえずDEMOを置いておきます。
iPhoneなどのスマホでは動画が表示されないので注意してください。スマホ用に代替え画像などを用意しましょう。
DEMO

1.YTPlayerを利用する準備

まず、プラグインを使う準備をします。
下記のサイトから「jquery.mb.YTPlayer.js」か「jquery.mb.YTPlayer.min.js」をDLして、HTMLで呼び出してください。
YTPlayer

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

1 2	<script src="js/jquery-3.2.1.min.js"></script> <script src="js/jquery.mb.YTPlayer.min.js"></script>

2.基本的な使い方

使い方はとてもシンプルです。
まず、埋め込みたい要素に次のように記述します。

<section id="mvbox">
	<div id="mv" class="player" data-property="{
		videoURL:'https://www.youtube.com/watch?v=z9QNDGwVTW4',
		containment:'#mvbox',
		autoPlay:true,
		loop:false,
		mute:true,
		vol:50,
		showControls:false,
		stopMovieOnBlur:false,
		startAt:0,
		opacity:1,
	}"></div>
</section>

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

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

containment:'#mvbox',

autoPlay:true,

loop:false,

mute:true,

vol:50,

showControls:false,

stopMovieOnBlur:false,

startAt:0,

opacity:1,

}"></div>

</section>

IDは任意のもので構いません。DIV要素以外でも大丈夫です。data-propertyの設定とJSのセレクタをIDに合わせてください。
data-propertyで細かい設定をしています。任意で書き換えてください。
各プロパティの説明はこちらです。

YouTubeのURLかID※必須: videoURL: ‘***’,
動画を埋め込む要素※必須(この要素の大きさにあわせて画像が埋め込まれる): containment: ‘***’,
自動再生: autoPlay: true,
ループ: loop: false,
ミュート: mute: true,
音量(0～100): vol: **,
コントローラーの表示: showControls: false,
ページを離れたら一時停止: stopMovieOnBlur: false,
動画の再生開始地点(秒): startAt: 0,
動画の終了地点(秒): stopAt: 30,
動画の透過: opacity: 1,
YouTubeロゴ表示: showYTLogo: true,

containmentで指定した要素の子要素として動画が埋め込まれます。動画のサイズはこの要素のサイズに自動で合わさるので、この要素の縦横をCSSで調整します。

#mvbox {
	width: 100%;
	height: 100vh;
}

#mvbox {

width: 100%;

height: 100vh;

}

最後にjsでYTPlayer関数を呼び出します。

// YTPlayer実行
$(function(){
	$("#mv").mb_YTPlayer();
});

// YTPlayer実行

$(function(){

$("#mv").mb_YTPlayer();

});

基本的にはこれだけで動画が埋め込まれます。

3.イベントの利用

イベントを利用することで、動画の再生が終了した時の処理などを命令できます。
次の例では、再生が終了すると動画を埋め込んでいる要素が非表示になります。

// 再生終了した時の処理
$(function() {
	$('#mv').on('YTPEnd', function() {
		$('#mvbox').css('opacity','0');
	});
});

// 再生終了した時の処理

$(function() {

$('#mv').on('YTPEnd', function() {

$('#mvbox').css('opacity','0');

});

イベントは他にも用意されていますので、詳しくは公式で確認してください。
home · pupunzi/jquery.mb.YTPlayer Wiki · GitHub

4.メソッドの利用

また、メソッドを利用することで、停止ボタンなどの制御ボタンをつけることができます。スキップボタンやミュートボタンも可能です。

// 動画の制御ボタンの処理
$(function() {
	// 再生ボタン
	$('#play').on('click', function() {
		$('#mv').YTPPlay();
	});

	// 一時停止ボタン
	$('#pause').on('click', function() {
		$('#mv').YTPPause();
	});

	// 停止ボタン
	$('#stop').on('click', function() {
		$('#mvbox').css('opacity','0');
		$('#mv').YTPStop();
	});

	// ミュートボタン
	$('#mv').on('YTPMuted', function() {
		$('#mute').addClass('on').removeClass('off');
	});
	$('#mv').on('YTPUnmuted', function() {
		$('#mute').addClass('off').removeClass('on');
	});
	$('#mute').on('click', function() {
		// ミュートされているかどうか
		if($(this).hasClass('on')) {
			// ミュートの解除
			$('#mv').YTPUnmute();
		} else if($(this).hasClass('off')) {
			// ミュート
			$('#mv').YTPMute();
		}
	});
});

// 動画の制御ボタンの処理

$(function() {

// 再生ボタン

$('#play').on('click', function() {

$('#mv').YTPPlay();

});

// 一時停止ボタン

$('#pause').on('click', function() {

$('#mv').YTPPause();

});

// 停止ボタン

$('#stop').on('click', function() {

$('#mvbox').css('opacity','0');

$('#mv').YTPStop();

});

// ミュートボタン

$('#mv').on('YTPMuted', function() {

$('#mute').addClass('on').removeClass('off');

});

$('#mv').on('YTPUnmuted', function() {

$('#mute').addClass('off').removeClass('on');

});

$('#mute').on('click', function() {

// ミュートされているかどうか

if($(this).hasClass('on')) {

// ミュートの解除

$('#mv').YTPUnmute();

} else if($(this).hasClass('off')) {

// ミュート

$('#mv').YTPMute();

}

});

メソッドは他にも用意されていますので、詳しくは公式で確認してください。
home · pupunzi/jquery.mb.YTPlayer Wiki · GitHub

この記事は、こちらのサイトを参考にしています。
YouTube動画を背景に使うなら「jquery.mb.YTPlayer」が良さげ – dev.kokushin