Blog スタッフブログ

JavaScript WEB制作

modal-video.jsで簡単モーダル表示

コーダーのKです。

modal-video.jsを利用して簡単にモーダル表示する方法をご紹介します。

modal-video.jsは、YouTubeやVimeo、またはカスタム動画などをモーダルウィンドウ（ポップアップ）で再生できる軽量なJavaScriptライブラリです。

動画のサムネイルやボタンをクリックすると、ページ内にモーダルウィンドウが表示され、動画がその中で再生されます。

利用までの手順

modal-video.jsを利用するには、以下の方法があります。

CDNの場合

以下のコードをHTMLファイルの<head>セクションに追加します。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modal-video/2.4.0/css/modal-video.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/modal-video/2.4.0/js/jquery.modal-video.min.js"></script>

ダウンロードして読み込む

ダウンロードしたmodal-video.min.cssとmodal-video.min.jsを、自分のプロジェクトフォルダの適切な場所（例えば、cssやjsフォルダ）に保存します。

  • modal-video.min.css
  • modal-video.min.js

modal-video.min.cssとmodal-video.min.jsをHTMLファイルに直接読み込みます。

HTMLファイルの<head>セクションでCSSを、<body>または</body>直前でJavaScriptを読み込みます。

<link rel="stylesheet" href="css/modal-video.min.css">
<script src="js/modal-video.min.js"></script>

利用例

html側の記述

サムネイルをクリックした時にモーダルを表示します。

data-video-id=”XXXX”にはモダールで表示するYoutubeのIDを指定します。

<div class="js-modal-video" data-video-id="XXXX">
    <img src="thumbnail.png" alt="サムネイル">
</div>

Javascript側の記述

<script>
    $(document).ready(function () {
        $(".js-video-button").modalVideo({
            channel: "youtube",
            youtube: { // オプションを設定
                controls: 1, // コントロール表示
            },
        });
    });
</script>
戻る一覧へ戻る