YouTube をモーダルウィンドウで開く（modal-video.js使用）

YouTubeをモーダルウィンドウで開くことができる modal-video.js プラグインを jQuery で設置する方法です。

実装

modal-video.js のファイルをダウンロードして下記を記述するだけ。

HTML

// modal-video の CSS の読み込み
<link rel="stylesheet" href="./modal-video.min.css">

//jQuery と modal-video の script の読み込み
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="./jquery-modal-video.min.js"></script>

// ボタン
<button class="js-modal-button" data-video-id="YouTubeのID">Videoを開く</button>

jQuery

$(function() {
	$('.js-modal-button').modalVideo();
});

YouTubeのオプション

色々なオプションが用意されています。公式ページ

オプション設定例（jQuery）

カスタマイズデモ

$('.js-modal-button').modalVideo({
	channel: 'youtube', // Vimeoの場合は vimeo
	youtube: {
		autoplay: 0, // 自動再生しない デフォルト = 1
		rel: 0, // 関連動画の指定 デフォルト = 0（チャンネルの関連動画を表示）
		controls: 0, // コントローラーを表示しない デフォルト = 1
		loop: 1 // ループさせる　デフォルト= 0
	},
});

ちなみに関連動画は消せません。（以前は非表示にすることができましたがYouTube側の仕様変更でできなくなりました）

CSS のカスタマイズ

SASSファイルの modal-video.scss が同梱されているためそれを編集すればOKです。
色は変数で定義されていますし、例えばモーダルウィンドウの幅は .modal-video-body の max-width で変更できます。