【jQuery】モーダルで動画を表示する「modal-video.js」

ひぐま
ひぐま

youtubeなどの動画をモーダルで表示したい、そんな時にさっと実装できるjsプラグインをご紹介します。
その名も「modal-video.js」です。

概要

表示できる動画はYouTube、Vimeo、mp4です。

  • HTML構造に依存しない
  • モーダルの開閉動作が滑らか
  • キーボードでの操作、スクリーンリーダーへの適応などのアクセシビリティ対応を備えている
  • YouTubeAPI、VimeoAPIの豊富なオプション付き

普段実装時悩ましい点に多く配慮されており、短いコードを貼り付けるだけで簡単にモーダルで動画を実装できちゃいます。

使ってみる

まず公式ページからダウンロードしてきます。
公式ページ

  1. 公式サイトにアクセス
  2. 「Download.zip」ボタンからダウンロードする
  3. ファイルを解凍し、cssフォルダから「modal-video.min.css」、
    jsフォルダから「jquery-modal-video.min.js」をjQueryと共にHTMLの<head>～</head>に読み込みます。
<link rel="stylesheet" href="css/modalVideo/modal-video.min.css">
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/jquery-modal-video.min.js"></script>

今回はyoutubeの動画で実装したいので、動画を開くボタンにclass「js-modal-btn」と、「data-video-id」属性をつけて、載せたい動画のIDを指定します。
動画のIDは、youtubeの動画画面上を右クリックして「詳細統計情報」を選択すると確認できます。

youtubeの場合

<button class="js-modal-btn" data-video-id="★動画ID">動画をみる</button>

mp4の場合

mp4の動画で実装する場合は「data-video-id」属性を「data-video-url」としてURLを指定します。

<button class="js-modal-btn" data-video-url="★動画URL">動画をみる</button>

スクリプト

スクリプトは以下です。ボタンに設定したクラスと指定しているクラスが一致しているか確認してください

<script>
    $(function(){
        $(".js-modal-btn").modalVideo();
    });
</script>

全体

一部割愛していますが、HTMLソース全体はこんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="css/modalVideo/modal-video.min.css">
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/jquery-modal-video.min.js"></script>
<script>
    $(function(){
        $(".js-modal-btn").modalVideo();
    });
</script>
</head>
<body>
<!-- /Main -->
<main>
    <section>
        <p><button class="js-modal-btn" data-video-id="★動画ID">動画をみる</button></p>
    </section>
</main>
<!-- /Main -->
</body>
</html>

デモ

以下から表示を確認してみてください。
ボタン以外は特にCSSを当ててません。すごく便利です！

デモ

関連記事