YouTubeの動画をモーダル表示したい

2023/10/26

YouTubeの動画をモーダル表示が必要な案件の依頼を受けました。

モーダルの実装に関しては、レスポンシブの対応が難しく、
以前苦戦したことを思い出していました。

今回はライブラリを使用したYouTube動画のモーダル表示の仕方についてご紹介します。

1 modal-video.jsとは
2 modal-video.jsのおすすめポイント
3 modal-video.jsの実装手順
4 modal-video.jsのデモ
- 4.1 aタグで設置した場合。
- 4.2 imgタグ(サムネイル)で設置した場合。

modal-video.jsとは

YouTubeのモーダルに関するライブラリはいくつかあり、その中でも「modal-video.js」が簡単で実装できそうだと感じました。

サンプルを作ってみました

modal-video.jsのおすすめポイント

おすすめポイントを以下にまとめました。

・非常に簡単にモーダルの実装ができます

・レスポンシブ対応しているので、PC/SP表示で苦しむことがないです

・imgタグで好きなサムネから、モーダルを表示できます

modal-video.jsの実装手順

①ファイルの読み込み

モーダル実装に必要なファイルは3種類です。CDNで用意されているので、以下をHTMLのheadタグ内に記述しましょう。

<!-- CDN modal-video CSS --> 
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/modal-video@2.4.8/css/modal-video.min.css" /> 

<!-- jQuery -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> 
<!-- CDN modal-video jQuery --> 
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/modal-video@2.4.8/js/jquery-modal-video.min.js"></script>

②HTMLの特定の位置に設置

表示させたい場所に、各タグを設置する

<!-- aタグで設置 -->
<a href="javascript:;" data-video-id="XXXXXXXX" class="js-modal-video">テキストを入力</a>

<!-- aタグ以外で設置 -->
<div data-video-id="XXXXXXXXXX" class="js-modal-video">テキストを入力</div>

<!-- 画像のみ -->
<img src="画像パス" data-video-id="XXXXXXXX" class="js-modal-video" alt="">

data-video-idには、下記URLの「jSClCdKs6OI」部分です。

https://www.youtube.com/watch?v=jSClCdKs6OI&t=2s

③JavaScriptファイルに動作記述

bodyの閉じタグの直前にJavaScriptを記述します。

(function () {
    $(".js-modal-video").modalVideo({
      channel: "youtube",　//YouTubeの場合
      youtube: {
        rel: 0, //関連動画の指定
        autoplay: 0, //自動再生の指定
      },
    });
})();