Youtube・Vimeoの動画をライブラリ「modal-video.js」を使ってモーダル表示する方法を紹介します。
まずは【デモ】
Source
1 2 | <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> |
1 | <script src="unpkg.com/modal-video@latest/js/modal-video.min.js"></script> |
1 | <link href="https://unpkg.com/modal-video@latest/css/modal-video.min.css" rel="stylesheet"> |
CDNを利用しない場合はmodal-video公式サイトからダウンロードしてください
jQueryのダウンロードはjQuery公式サイトから。
Basic
1 | <button class="modalVideo" data-video-id="[動画ID]">Youtube</button> |
1 2 3 4 5 | <script> $(function(){ $(".modalVideo").modalVideo(); //起動ボタンと同じclass名を使用します }); </script> |
1 2 3 4 5 | <script> document.addEventListener('DOMContentLoaded', function () { new ModalVideo('.modalVideo'); // 起動ボタンと同じclass名を指定します }); </script> |
Thumbnail
Youtubeでは動画IDを使用してサムネイル画像を取得することができます。
ファイル名によって5種類のサイズを取得できます。
1 | <img src="http://img.youtube.com/vi/[動画ID]/default.jpg" alt=""> |
1 | <img src="http://img.youtube.com/vi/[動画ID]/mqdefault.jpg" alt=""> |
1 | <img src="http://img.youtube.com/vi/[動画ID]/hqdefault.jpg" alt=""> |
1 | <img src="http://img.youtube.com/vi/[動画ID]/sddefault.jpg" alt=""> |
1 | <img src="http://img.youtube.com/vi/[動画ID]/maxresdefault.jpg" alt=""> |
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）。 |