プラグインを使ってYouTubeをポップアップさせる方法

2022年5月14日

YouTubeをポップアップで表示させる方法ってある？

通常YouTubeの埋め込みはサムネイルが表示されてる状態ですが、テキストや別に用意した画像をサムネイルとし、プラグインを使えばそれらをクリックしてモーダルのようにポップアップさせる事が出来ます。

今回はその方法について解説していきます。

効率よくコーディングしたい人はこちら

プラグインを使ってYouTubeをポップアップさせる方法

今回YouTubeをポップアップさせるのにmodal-video.jsというjQueryのプラグインを使います。

YouTubeだけでなくvimeoもポップアップさせる事が出来ますが、今回はYouTubeのみ解説します。

まずは通常の埋め込み方法を見てから、ポップアップで再生させる方法を解説していきます。

YouTubeを埋め込む方法（通常）

まずは通常の埋め込み方法です。

埋め込みたい動画の下にある共有をクリックします。

共有をクリックするとこちらがポップアップされるので、埋め込むをクリックします。

埋め込むをクリックするとこちらが開くので、右下のコピーをクリックします。

コードの下にはオプションがありますが、一旦無視して進めます。

コピーしたコードをHTMLに貼れば完了です。

こちらがデモになります。

See the Pen
YouTubeを普通に再生 by junpei (@junpei-sugiyama)
on CodePen.

レスポンシブにするためHTMLのheightとwidthを削除し、CSSでheightとwidthを調整しています。

これが通常の埋め込みで、サムネイルが表示されている状態となります。

modal-video.jsの使い方（YouTubeをポップアップ表示）

このプラグインはjQueryを使用するので、jQuery本体の読み込みを忘れないようにしましょう。

jQueryを使ったことがない人はこちらの記事を参照下さい。

【初めて使う人向け】jQuery本体を読み込む方法

modal-video.jsを使う方法は2つあります。

ファイルをDLして読み込む
CDNで読み込む

今回はCDNを使った方法を中心に解説していきますが、ファイルをDLする方法も解説します。

ファイルをDLして使う

ファイルをDLして使う場合は、以下のページからDLします。

modal-video.jsのDLはこちら

ページを開いたらCodeをクリックして、その後にDomnload ZIPをクリックしてファイルをDLします。

DLしたファイルを解凍したら以下のファイルが入っています。

たくさんありますが、使うファイルは以下の2つだけです。

cssフォルダ：modal-video.min.css
jsフォルダ：jquery-modal-video.min.js

この2つを読み込んで使用します。

使い方については次のCDNを使った方法で解説します。

CDNを読み込んで使う

CDNを読み込んで使う場合は、以下のコードで読み込みます。

<!-- modal-video.jsのcss -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/modal-video@2.4.6/css/modal-video.min.css"/>
<!-- jQuery本体 -->
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- modal-video.jsのjs -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/modal-video@2.4.6/js/jquery-modal-video.min.js"></script>

これでmodal-video.jsを使う準備が出来ました。

HTMLの書き方

HTMLはaタグに書く方法と、aタグ以外に書く方法があります。

<!-- aタグで設定 -->
<a href="javascript:void(0);" data-video-id="2w60A9zDrBk" class="js-modal-video">ポップアップ01</a>

<!-- aタグ以外で設定 -->
<div data-video-id="2w60A9zDrBk" class="js-modal-video">ポップアップ02</div>

data-video-idはYouTubeのURLで確認します。

aタグ以外（divタグやspanタグなど）だとカーソル乗せてもポインターが表示されないので、aタグ以外の場合はcursor: pointer;でポインターが表示されるようにした方がいいかと思います。

そしてjQueryは以下になります。

(function () {
  if ($(".js-modal-video").length) {
    $(".js-modal-video").modalVideo({
      channel: "youtube",
      youtube: {
        controls: 1, // コントロール表示（0は非表示）
      },
    });
  }
})();

CSSはレイアウトの為のスタイルしか書いていないので割愛します。

See the Pen
YouTubeをポップアップで再生 by junpei (@junpei-sugiyama)
on CodePen.

また、aタグなどの中にimgタグを入れれば画像クリックでポップアップさせることも出来ます（動画と全然関係ない画像ですが・・・）

See the Pen
YouTubeをポップアップで再生（画像） by junpei (@junpei-sugiyama)
on CodePen.

パラメータについては以下のページを参照下さい。

YouTube 埋め込みプレーヤーとプレーヤーのパラメータ