Youtube動画をモーダルで簡単表示
Youtube・Vimeoの動画をライブラリ「modal-video.js」を使ってモーダル表示する方法を紹介します。 まずは【デモ】
Source
JS読み込み※jQueryを使用する場合
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://unpkg.com/modal-video@latest/js/jquery-modal-video.min.js"></script>
JS読み込み※jQueryを使用しない場合
<script src="unpkg.com/modal-video@latest/js/modal-video.min.js"></script>
CSS読み込み
<link href="https://unpkg.com/modal-video@latest/css/modal-video.min.css" rel="stylesheet">
CDNを利用しない場合はmodal-video公式サイトからダウンロードしてください
jQueryのダウンロードはjQuery公式サイトから。
Basic
HTML：モーダル起動ボタン
<button class="modalVideo" data-video-id="[動画ID]">Youtube</button>
JS：発火スクリプト（jQuery使用）
<script>
$(function(){
$(".modalVideo").modalVideo(); //起動ボタンと同じclass名を使用します
});
</script>
JS：発火スクリプト（jQuery不使用）
<script>
document.addEventListener('DOMContentLoaded', function () {
new ModalVideo('.modalVideo'); // 起動ボタンと同じclass名を指定します
});
</script>
Thumbnail
Youtubeでは動画IDを使用してサムネイル画像を取得することができます。
ファイル名によって5種類のサイズを取得できます。
Youtubeサムネイル 120×90
<img src="http://img.youtube.com/vi/[動画ID]/default.jpg" alt="" width="120" height="90">Youtubeサムネイル 320×180
<img src="http://img.youtube.com/vi/[動画ID]/mqdefault.jpg" alt="" width="120" height="90">Youtubeサムネイル 480×360
<img src="http://img.youtube.com/vi/[動画ID]/hqdefault.jpg" alt="" width="120" height="90">Youtubeサムネイル 640×480
<img src="http://img.youtube.com/vi/[動画ID]/sddefault.jpg" alt="" width="120" height="90">Youtubeサムネイル 1280×720
<img src="http://img.youtube.com/vi/[動画ID]/maxresdefault.jpg" alt="" width="120" height="90">Option
| Youtubeオプション | 初期値 | 説明 |
|---|---|---|
| autoplay | 1 | モーダルを開いたら動画を自動再生します。0で自動再生しません。 |
| cc_load_policy | 1 | 字幕（CC）がある場合、自動的に表示します。0で非表示（ユーザー設定が優先される場合があります）。 |
| controls | 1 | 再生・停止・シークバー・音量などのプレーヤー操作を表示します。0で非表示。 |
| disablekb | 0 | キーボード操作を有効にします。1で無効化します。 |
| enablejsapi | 0 | YouTube IFrame Player APIとの連携を有効にします。JavaScriptからプレーヤーを制御する場合は1を指定します。 |
| end | null | 指定した秒数で動画の再生を終了します。 |
| fs | 1 | 全画面表示ボタンを表示します。0で非表示。 |
| hl | null | プレーヤーの表示言語を指定します（例：ja、en）。 |
| list | null | 再生するプレイリストIDを指定します。 |
| listType | null | listで指定する種類（playlistなど）を指定します。 |
| loop | 0 | 動画をループ再生します。単一動画ではplaylistも設定する必要があります。 |
| origin | null | IFrame Player API利用時のオリジン（サイトURL）を指定します。 |
| playlist | null | ループ再生やプレイリスト再生に使用する動画ID・プレイリストIDを指定します。 |
| playsinline | null | モバイル端末でインライン再生します。1で有効。 |
| rel | 0 | 再生終了後の関連動画表示を制御します。現在は0でも同じチャンネルの関連動画が表示されます。 |
| start | 0 | 指定した秒数から再生を開始します。 |
| Vimeoオプション | 初期値 | 説明 |
|---|---|---|
| autopause | TRUE | 他のVimeo動画の再生を開始すると、自動的に現在の動画を一時停止します。 |
| autoplay | TRUE | モーダルを開いたら動画を自動再生します。 |
| byline | TRUE | 投稿者名（Byline）を表示します。 |
| color | null | プレーヤーのアクセントカラーを16進カラーコードで指定します（例：00adef）。 |
| height | null | プレーヤーの高さを指定します（px）。 |
| loop | FALSE | 動画をループ再生します。 |
| maxheight | null | プレーヤーの最大高さを指定します。 |
| maxwidth | null | プレーヤーの最大幅を指定します。 |
| portrait | TRUE | 投稿者のプロフィール画像を表示します。 |
| title | TRUE | 動画タイトルを表示します。 |
| width | null | プレーヤーの幅を指定します（px）。 |
オプション記述例（jQuery使用）
<script>
$(document).ready(function () {
$(".modalVideo").modalVideo({
channel: "youtube", //動画サービスを指定
youtube: { // オプションを設定
controls: 1, // コントロール表示
loop: 1, // ループ再生
},
});
});
</script>
オプション記述例（jQuer不使用）
<script>
new ModalVideo('.modalVideo', {
channel: 'youtube', //動画サービスを指定
youtube: { // オプションを設定
controls: 1, // コントロール表示
loop: 1, // ループ再生
}
});
</script>
