jQuery Web制作

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

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

以上になります。

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-jQuery, Web制作
-