jQuery Web制作

YouTubeを埋め込みプラグインを使ってポップアップさせる方法【modal-video.js使用】

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

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

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

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!

累計1080部突破!レビュー550件!

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

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

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

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

 

YouTubeを埋め込む方法(通常)

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

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

YouTube:『共有』をクリック

YouTube:『共有』をクリック

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

YouTube:『埋め込む』をクリック

YouTube:『埋め込む』をクリック

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

YouTube:『コピー』をクリック

YouTube:『コピー』をクリック

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

YouTube:埋め込みオプション

YouTube:埋め込みオプション

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

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

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

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

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


『modal-video.js』の使い方(YouTubeをポップアップ表示)

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

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

あわせて読みたい
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説
【初心者向け】jQueryとは?CDNを使った本体の読み込み方も分かりやすく解説

続きを見る

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

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

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

 

ファイルをDLして使う

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

『modal-video.js』のDLはこちら

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

『modal-video.js』をダウンロード

『modal-video.js』をダウンロード

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

『modal-video.js』ファイル一式

『modal-video.js』ファイル一式

たくさんありますが、使うファイルは以下の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="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></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で確認します。

data-video-idの確認

data-video-idの確認

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 埋め込みプレーヤーとプレーヤーのパラメータ

以上になります。

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1060部以上販売し、レビューは520件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる

-jQuery, Web制作
-