【jQuery】modal-video.jsでYouTube・Vimeoをモーダル表示する完全ガイド｜サムネイル・npm・WordPress・CSSカスタマイズまで

2024.05.26

動画をページ内でモーダル（ポップアップ）再生する機能は、ポートフォリオサイトや商品紹介ページでよく使われます。modal-video.js は数行のコードでYouTube・Vimeoのモーダル再生を実現できる軽量ライブラリです。

この記事でわかること

  • modal-video.js の導入方法（CDN / npm）
  • ボタンクリックでYouTube・Vimeo動画をモーダル表示する
  • サムネイル画像クリックでモーダルを開くパターン
  • 主要オプション（自動再生・関連動画非表示など）
  • CSSでオーバーレイのカラーをカスタマイズ
  • WordPressで使う場合の注意点
スポンサーリンク

modal-video.jsとは

modal-video.jsは、YouTube・Vimeo・カスタム動画をiframeでモーダル表示するjQueryプラグインです。動画の再生ページに遷移することなく、現在のページ上でオーバーレイ表示します。

特徴 内容
対応動画 YouTube・Vimeo・カスタムURL
ファイルサイズ 約9KB（minified）
依存関係 jQuery 1.7+（またはVanilla JS版あり）
アクセシビリティ Escキーで閉じる・aria属性対応
メンテナンス状況 GitHubで継続的に更新中
2025年現在のjQuery版について
modal-video.jsはjQuery版とVanilla JS版（jQueryなし）があります。このページではjQuery版を解説しますが、新規プロジェクトではjQueryへの依存を避けるためVanilla JS版 (modal-video npm package) の利用も検討してください。

導入方法

CDN（最も手軽）

<head>
  <!-- modal-video.js のCSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modal-video/css/modal-video.min.css">
</head>
<body>
  <!-- コンテンツ -->

  <!-- jQuery → modal-video.js の順で読み込む -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/modal-video/js/jquery.modal-video.min.js"></script>
</body>

npm でインストール

npm install modal-video
// ES Modules / webpack / Vite 環境
import 'modal-video/css/modal-video.css';
import ModalVideo from 'modal-video';

基本実装: ボタンクリックでYouTube動画をモーダル表示

YouTubeのビデオIDを確認する

YouTubeのURLが https://www.youtube.com/watch?v=dQw4w9WgXcQ の場合、v= 以降の文字列（例: dQw4w9WgXcQ）がビデオIDです。

HTML

<!-- data-video-id に YouTube のビデオIDを設定 -->
<button class="js-modal-btn" data-video-id="dQw4w9WgXcQ">動画を再生する</button>

JavaScript

$(function () {
  $('.js-modal-btn').modalVideo({
    channel: 'youtube',       // デフォルトはyoutube
    youtube: {
      autoplay: 1,            // 自動再生（0で無効）
      rel: 0                  // 関連動画を非表示（推奨）
    }
  });
});
rel: 0 で関連動画を抑制する
rel: 0 を指定すると、動画再生後に表示される関連動画を同じチャンネルの動画のみに絞ることができます（完全に非表示にはできません）。ブランドの信頼性を保つために設定することを推奨します。

サムネイル画像クリックでモーダルを開く

ボタンではなく、サムネイル画像をクリックして動画を開くパターンはよく使われます。<a> タグに class="js-modal-btn" を付けて実装します。

HTML

<a href="javascript:void(0)" class="js-modal-btn js-video-thumb" data-video-id="dQw4w9WgXcQ">
  <img src="https://img.youtube.com/vi/dQw4w9WgXcQ/mqdefault.jpg"
       alt="動画のサムネイル"
       width="320" height="180">
  <!-- 再生ボタンのオーバーレイ -->
  <span class="play-icon">&#9654;</span>
</a>
YouTubeのサムネイル画像URL
YouTube動画のビデオID（例: dQw4w9WgXcQ）がわかれば、サムネイル画像URLは以下のパターンで取得できます：
https://img.youtube.com/vi/[ビデオID]/mqdefault.jpg（中解像度）
https://img.youtube.com/vi/[ビデオID]/maxresdefault.jpg（最大解像度）

CSS（再生ボタンのオーバーレイスタイル）

.js-video-thumb {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.js-video-thumb img {
  display: block;
  border-radius: 8px;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  transition: transform 0.2s;
}

.js-video-thumb:hover .play-icon {
  transform: translate(-50%, -50%) scale(1.15);
}

Vimeo動画のモーダル表示

Vimeoの場合は channel: "vimeo" とビデオIDを指定します。VimeoのURLが https://vimeo.com/123456789 の場合、ビデオIDは 123456789 です。

<button class="js-vimeo-btn" data-video-id="123456789">Vimeo動画を再生</button>
$(function () {
  $('.js-vimeo-btn').modalVideo({
    channel: 'vimeo',
    vimeo: {
      autoplay: 1,
      title: 0,     // タイトルを非表示
      byline: 0,    // 作成者名を非表示
      portrait: 0   // プロフィール画像を非表示
    }
  });
});

主要オプション一覧

オプション デフォルト 説明
channel “youtube” 動画プラットフォーム（youtube/vimeo/custom）
youtube.autoplay 1 自動再生（0で無効）
youtube.rel 0 関連動画を同チャンネルのみに（推奨: 0）
allowFullScreen true フルスクリーンモードを許可
animationSpeed 300 モーダル開閉アニメーションの速度（ms）
vimeo.autoplay 1 Vimeo動画の自動再生
ariaLabel “Close…” 閉じるボタンのARIAラベル

CSSカスタマイズ

modal-video.jsのデフォルトスタイルは modal-video.min.css で定義されています。自前のCSSで上書きしてカスタマイズできます。

/* オーバーレイの背景色を変更（デフォルト: rgba(0,0,0,0.5)） */
.modal-video {
  background-color: rgba(0, 0, 0, 0.85);
}

/* 動画の最大幅を変更 */
.modal-video-movie-wrap {
  max-width: 900px;
}

/* 閉じるボタンのカスタマイズ */
.modal-video-close-btn {
  background-color: #ff4444;
  border-radius: 50%;
}

WordPressでの使い方

WordPressでは functions.php でスクリプトを登録し、noConflictモード対応でjQueryを使います。

// functions.php でスクリプトを登録
// wp_enqueue_style('modal-video-css', 'https://cdn.jsdelivr.net/npm/modal-video/css/modal-video.min.css');
// wp_enqueue_script('modal-video', 'https://cdn.jsdelivr.net/npm/modal-video/js/jquery.modal-video.min.js', ['jquery']);

// テンプレートやカスタムJSファイル内（noConflictモード対応）
(function ($) {
  $(function () {
    $('.js-modal-btn').modalVideo({
      channel: 'youtube',
      youtube: { autoplay: 1, rel: 0 }
    });
  });
})(jQuery);

jQueryなしで動画モーダルを実装する（代替手法）

jQueryやライブラリなしで動画モーダルを実装する場合、HTML5の <dialog> 要素と iframe を組み合わせる方法があります。

<button id="open-modal">動画を再生</button>

<dialog id="video-modal">
  <button id="close-modal">&#x2715; 閉じる</button>
  <iframe id="video-iframe" width="560" height="315"
    src="" frameborder="0" allowfullscreen></iframe>
</dialog>
var VIDEO_ID = 'dQw4w9WgXcQ';
var $modal  = document.getElementById('video-modal');
var $iframe = document.getElementById('video-iframe');

document.getElementById('open-modal').addEventListener('click', function () {
  $iframe.src = 'https://www.youtube.com/embed/' + VIDEO_ID + '?autoplay=1&rel=0';
  $modal.showModal();
});

document.getElementById('close-modal').addEventListener('click', function () {
  $iframe.src = '';  // 動画を停止
  $modal.close();
});

// オーバーレイクリックで閉じる
$modal.addEventListener('click', function (e) {
  if (e.target === $modal) {
    $iframe.src = '';
    $modal.close();
  }
});
dialog要素のブラウザ対応
<dialog> 要素はChrome 37+・Firefox 98+・Safari 15.4+・Edge 79+でサポートされています。2024年以降の主要ブラウザはすべて対応しているため、新規プロジェクトでは積極的に使えます。

まとめ

modal-video.jsを使えば数行のコードでYouTube・Vimeoのモーダル再生を実装できます。

  • CDN1行 + CSS1行 + JS2行の最小実装でモーダル動画が動く
  • サムネイル + 再生アイコンのオーバーレイで視覚的に分かりやすいUIに
  • rel: 0 で再生後の関連動画を制限（ブランド保護）
  • WordPressは即時関数でnoConflictモードに対応
  • jQueryなしなら <dialog> + iframe が軽量でシンプル

関連記事: YouTubeをWebサイトの背景動画に設定する方法 / 初回アクセス時のみポップアップを表示する / 一定時間後にポップアップを表示する

よくある質問（FAQ）

Qモーダルを閉じても動画の音が聞こえます。
Amodal-video.jsは閉じるときにモーダル要素ごと削除されるため、通常は動画も停止されます。もし継続して再生される場合は、iframeの src を空にするコールバック処理を追加してください。Vanilla JS版では閉じるボタンのイベントで iframe.src = "" を実行するのが確実です。
Q複数の動画サムネイルにそれぞれ別のIDを設定したいです。
A各サムネイルに data-video-id="[ビデオID]" を個別に設定してください。$(".js-modal-btn").modalVideo() でまとめて初期化すれば、クリックされた要素の data-video-id が自動的に使われます。
Qスマホでモーダルが小さく表示されます。
Amodal-video.jsのCSSは基本的にレスポンシブ対応していますが、.modal-video-movie-wrap の padding-bottom でアスペクト比を調整してください。デフォルトは16:9（56.25%）です。
Qモーダルを開くときにアニメーションを変えたいです。
AanimationSpeed オプションでアニメーション速度（ms）を変更できます。フェードイン以外のアニメーションはCSSの @keyframes を上書きすることでカスタマイズ可能です。
Qmodal-video.jsを使わずに同様の機能を実装できますか？
Aはい。HTML5の <dialog> 要素と iframe を組み合わせれば、jQueryやライブラリなしで同様の機能が実装できます。閉じる際に iframe.src = "" で動画を確実に停止する点がポイントです。上記の「代替手法」セクションのコードを参考にしてください。