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 で変更できます。