modal-video.jsで簡単にYouTube動画をモーダル表示する方法

2024.05.26

今回は、modal-video.jsという便利なライブラリを使って、YouTube動画をモーダル表示する方法をご紹介します。初心者の方でも簡単に導入できるので、ぜひお試しください。

modal-video.jsとは？

modal-video.jsは、YouTubeやVimeoの動画を簡単にモーダル（ポップアップ）で表示できる軽量なライブラリです。動画を再生するためにページを離れることなく、スタイリッシュに動画を表示することができます。

必要なライブラリのインストール

まずは、modal-video.jsとそのスタイルシートをHTMLファイルに追加しましょう。CDNを利用すると簡単です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal Video Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modal-video/css/modal-video.min.css">
</head>
<body>
    <!-- あなたのコンテンツがここに入ります -->

    <script src="https://cdn.jsdelivr.net/npm/modal-video/js/jquery.modal-video.min.js"></script>
</body>
</html>

HTML構造の設定

次に、YouTube動画を表示するためのボタンを作成します。このボタンをクリックするとモーダルが表示されます。

<body>
    <!-- あなたのコンテンツがここに入ります -->

    <button class="js-modal-btn" data-video-id="your-video-id">動画を見る</button>

    <script src="https://cdn.jsdelivr.net/npm/modal-video/js/jquery.modal-video.min.js"></script>
</body>

JavaScriptでモーダルを初期化

次に、ボタンをクリックしたときにモーダルを表示するためのJavaScriptコードを追加します。

<body>
    <!-- あなたのコンテンツがここに入ります -->

    <button class="js-modal-btn" data-video-id="your-video-id">動画を見る</button>

    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/modal-video/js/jquery.modal-video.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.js-modal-btn').modalVideo();
        });
    </script>
</body>

完成したコードの例

最後に、すべてを組み合わせた完全なコードを紹介します。以下のコードをコピーしてご自身のプロジェクトでお試しください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal Video Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modal-video/css/modal-video.min.css">
</head>
<body>

    <button class="js-modal-btn" data-video-id="your-video-id">動画を見る</button>

    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/modal-video/js/jquery.modal-video.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.js-modal-btn').modalVideo();
        });
    </script>
</body>
</html>

オプション

オプション名 デフォルト値 説明
channel ‘youtube’ ビデオプラットフォーム。’youtube’, ‘vimeo’, ‘custom’ が利用可能。
youtube.autoplay true YouTubeビデオを自動再生するかどうか。
youtube.rel 0 関連動画の表示設定（0: 関連動画を表示しない、1: 関連動画を表示する）。
youtube.showinfo 0 動画情報（タイトルなど）を表示するかどうか。
vimeo.autoplay true Vimeoビデオを自動再生するかどうか。
vimeo.title 0 動画のタイトルを表示するかどうか。
vimeo.byline 0 作成者の情報を表示するかどうか。
vimeo.portrait 0 作成者のプロフィール画像を表示するかどうか。
allowFullScreen true フルスクリーンモードを許可するかどうか。
animationSpeed 300 モーダルの開閉アニメーションの速度（ミリ秒単位）。
autoplay true ビデオを自動再生するかどうか。
modalVideoCloseBtn <button class=”modal-video-close-btn”>×</button> 閉じるボタンのHTMLコンテンツ。
modalVideoBody 空文字列 モーダルボディのHTMLコンテンツ。
url – カスタムビデオチャンネル用のURLテンプレート関数。
ariaLabel ‘Close the modal video’ 閉じるボタンのARIAラベル。
classNames.modalVideo ‘modal-video’ モーダルビデオのクラス名。
classNames.modalVideoClose ‘modal-video-close’ モーダルビデオの閉じるボタンのクラス名。
classNames.modalVideoBody ‘modal-video-body’ モーダルビデオのボディ部分のクラス名。
classNames.modalVideoInner ‘modal-video-inner’ モーダルビデオの内部コンテナのクラス名。
classNames.modalVideoIframeWrap ‘modal-video-movie-wrap’ ビデオiframeのラップクラス名。
classNames.modalVideoCloseBtn ‘modal-video-close-btn’ モーダルビデオの閉じるボタンのクラス名。

オプションの記述方法

<script>
  new ModalVideo('.js-modal-btn', {
    // ビデオプラットフォームをYouTubeに設定
    channel: 'youtube',
    youtube: {
      // YouTubeビデオを自動再生する設定
      autoplay: 1
    },
    vimeo: {
      // Vimeoビデオを自動再生する設定
      autoplay: 1
    },
    // フルスクリーンモードを許可する設定
    allowFullScreen: true,
    // モーダルの開閉アニメーションの速度を400ミリ秒に設定
    animationSpeed: 400,
    // ビデオを自動再生する設定
    autoplay: true,
    // カスタムの閉じるボタンHTMLを指定
    modalVideoCloseBtn: '<button class="custom-close-btn">&times;</button>',
    // カスタムのモーダルボディHTMLを指定
    modalVideoBody: '<div class="custom-modal-body"></div>'
  });
</script>

まとめ

modal-video.jsを使えば、簡単にYouTube動画をモーダル表示することができます。これにより、ユーザーはページを離れることなく動画を楽しむことができ、ウェブサイトの体験が向上します。ぜひ試してみてください！