YouTube動画をモーダルウインドウに表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

テキスト・表示ボタン・サイズ・余白・角丸・背景色・文字色・影などを設定して、HTML・CSS・JavaScriptを自動生成できます。

YouTube動画をモーダルウインドウに表示する方法

YouTube動画をモーダルウインドウに表示する方法を紹介します。このサンプルでは、「動画を再生」ボタンをクリックすると画面中央にモーダルウインドウが開き、その中でYouTube動画を再生できます。動画をページ内へ常時表示せず、必要なタイミングだけ大きく表示できるため、ページ全体をすっきり見せながら動画コンテンツを案内できます。

商品やサービスの紹介動画、操作方法を説明する動画、会員サイトの案内動画、ECサイトの商品紹介、Webサイト内のプロモーション動画など、ページの内容を見ながら必要に応じて動画を開く構成に適しています。モーダルウインドウ内の動画は16:9の比率で表示され、画面幅に合わせて縮小されるため、スマートフォン・タブレット・PCでも利用できます。

HTMLではボタンやモーダルウインドウ、YouTube動画を表示するiframeを配置し、CSSではモーダルの横幅、余白、背景色、角丸、表示アニメーションなどを調整できます。JavaScriptではボタンをクリックしたときにYouTubeの埋め込みURLをiframeへ設定してモーダルを表示し、「閉じる」ボタンを押したときにURLを空へ戻して動画の再生を停止します。表示する動画を変更する場合は、YouTube動画の動画IDを用途に合わせて変更できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

「動画を再生」をクリックするとモーダルウインドウ内でYouTube動画を再生できます。
※ デモではYouTubeのサンプル動画を利用しています。配布用コードでは動画IDを変更してご利用ください。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン表示対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>YouTube動画をモーダルウインドウに表示する方法</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- YouTube動画モーダルを開く操作エリア -->
  <div class="youtube-modal_wrap">

    <!-- タイトル -->
    <div class="youtube-modal_title">
      YouTube動画モーダル
    </div>

    <!-- 説明文 -->
    <p class="youtube-modal_text">
      ボタンを押すとYouTube動画をモーダルウインドウで表示します。
    </p>

    <!-- YouTube動画を開くボタン -->
    <button
      class="youtube-modal_open"
      type="button"
      data-youtube-modal-open>
      動画を再生
    </button>

  </div>

  <!-- モーダル背景 -->
  <div
    class="youtube-modal_overlay"
    data-youtube-modal-overlay>

    <!-- モーダル本体 -->
    <div
      class="youtube-modal_modal"
      role="dialog"
      aria-modal="true"
      aria-labelledby="youtube-modal-title">

      <!-- モーダルタイトル -->
      <div
        class="youtube-modal_modal-title"
        id="youtube-modal-title">
        YouTube動画
      </div>

      <!-- YouTube動画表示エリア -->
      <div class="youtube-modal_player-wrap">

        <!--
          YouTube動画

          表示する動画はscript.jsで設定する。
          このiframeのsrc属性へ動画URLを直接入力する必要はありません。

          script.js内の
          YOUR_YOUTUBE_VIDEO_ID
          を、表示したいYouTube動画の動画IDへ置き換えてください。
        -->
        <iframe
          class="youtube-modal_player"
          src=""
          title="YouTube動画"
          data-youtube-modal-player
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen>
        </iframe>

      </div>

      <!-- モーダルを閉じるボタン -->
      <button
        class="youtube-modal_close"
        type="button"
        data-youtube-modal-close>
        閉じる
      </button>

    </div>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ページ外側の余白をなくす */
  padding:40px 20px; /* 上下40px・左右20pxの余白。値を大きくするとページ端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
  box-sizing:border-box; /* paddingと枠線を要素サイズに含める */
}

/* YouTube動画モーダルを開く操作エリア */
.youtube-modal_wrap{
  max-width:760px; /* 最大横幅。値を大きくすると操作エリアが広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側余白。値を大きくすると内容周囲の余白が広がる */
  border:1px solid #e5e7eb; /* 操作エリアを囲む枠線 */
  border-radius:18px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 操作エリアの背景色 */
  text-align:center; /* タイトル・説明文・ボタンを中央揃え */
  box-sizing:border-box; /* paddingと枠線を横幅に含める */
}

/* タイトル */
.youtube-modal_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  font-size:22px; /* 文字サイズ。値を大きくするとタイトルが大きくなる */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
}

/* 説明文 */
.youtube-modal_text{
  margin:0 0 24px; /* 下側24pxの余白。値を大きくするとボタンとの間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 行間。値を大きくすると行間が広がる */
}

/* YouTube動画を開くボタン */
.youtube-modal_open{
  padding:12px 28px; /* 上下12px・左右28pxの内側余白。値を大きくするとボタンが大きくなる */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:10px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#ff0000; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタンの文字を太字にする */
  cursor:pointer; /* マウスカーソルを指型にする */
}

/* モーダル背景 */
.youtube-modal_overlay{
  display:none; /* 初期状態ではモーダルを非表示 */
  position:fixed; /* 画面全体へ固定 */
  inset:0; /* 上下左右を0にして画面全体へ広げる */
  z-index:9999; /* 他の要素より前面へ表示 */
  align-items:center; /* モーダルを縦中央へ配置 */
  justify-content:center; /* モーダルを横中央へ配置 */
  padding:20px; /* 画面端との余白。値を大きくすると端との間隔が広がる */
  background:rgba(15,23,42,.75); /* 背景色。最後の.75を大きくすると暗く、小さくすると薄くなる */
  box-sizing:border-box; /* paddingを画面幅に含める */
}

/* モーダル表示状態 */
.youtube-modal_overlay.is-active{
  display:flex; /* 表示用クラスが付いた時にモーダルを表示 */
}

/* モーダル本体 */
.youtube-modal_modal{
  width:100%; /* 画面幅に合わせて縮小 */
  max-width:900px; /* 最大横幅。値を大きくするとモーダルが広がる */
  padding:20px; /* 内側余白。値を大きくすると動画周囲の余白が広がる */
  border-radius:18px; /* モーダル本体の角丸 */
  background:#ffffff; /* モーダル本体の背景色 */
  box-shadow:0 24px 60px rgba(0,0,0,.28); /* モーダルの影 */
  box-sizing:border-box; /* paddingを横幅に含める */
  animation:youtube-modal_show .3s ease forwards; /* 0.3秒で表示。値を大きくすると遅く、小さくすると速くなる */
}

/* モーダルタイトル */
.youtube-modal_modal-title{
  margin:0 0 18px; /* 下側18pxの余白。値を大きくすると動画との間隔が広がる */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  text-align:center; /* タイトルを中央揃え */
}

/* YouTube動画表示エリア */
.youtube-modal_player-wrap{
  width:100%; /* モーダル幅いっぱいに表示 */
  aspect-ratio:16 / 9; /* 横16：縦9の比率で動画を表示 */
  overflow:hidden; /* 角丸の外側を隠す */
  border-radius:12px; /* 動画表示エリアの角丸 */
  background:#000000; /* 動画読み込み前の背景色 */
}

/* YouTube動画 */
.youtube-modal_player{
  display:block; /* iframe下の不要な余白をなくす */
  width:100%; /* 表示エリアの横幅いっぱいに広げる */
  height:100%; /* 表示エリアの高さいっぱいに広げる */
  border:none; /* iframeの枠線をなくす */
}

/* モーダルを閉じるボタン */
.youtube-modal_close{
  display:block; /* 左右中央配置できるようにする */
  margin:18px auto 0; /* 上側18pxの余白を付けて左右中央へ配置 */
  padding:12px 24px; /* 上下12px・左右24pxの内側余白 */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:10px; /* ボタンの角丸 */
  background:#111827; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタンの文字を太字にする */
  cursor:pointer; /* マウスカーソルを指型にする */
}

/* モーダル表示アニメーション */
@keyframes youtube-modal_show{

  /* アニメーション開始時 */
  from{
    opacity:0; /* 透明な状態から開始 */
    transform:scale(.9); /* 90%の大きさから開始 */
  }

  /* アニメーション終了時 */
  to{
    opacity:1; /* 完全に表示 */
    transform:scale(1); /* 通常サイズへ拡大 */
  }

}

/* 画面幅640px以下 */
@media (max-width:640px){

  /* スマートフォン用の操作エリア */
  .youtube-modal_wrap{
    padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
  }

  /* スマートフォン用のモーダル本体 */
  .youtube-modal_modal{
    padding:16px; /* モーダル内側の余白を縮小 */
  }

}

// YouTube動画を開くボタンを取得
const youtubeModalOpen=document.querySelector(
  "[data-youtube-modal-open]"
);

// モーダル背景を取得
const youtubeModalOverlay=document.querySelector(
  "[data-youtube-modal-overlay]"
);

// モーダルを閉じるボタンを取得
const youtubeModalClose=document.querySelector(
  "[data-youtube-modal-close]"
);

// YouTube動画を表示するiframeを取得
const youtubeModalPlayer=document.querySelector(
  "[data-youtube-modal-player]"
);

/*
  【YouTube動画IDの設定方法】

  1. YouTubeでモーダルに表示したい動画を開きます。

  2. ブラウザのアドレス欄に表示されているURLを確認します。

     通常のYouTube URL例
     https://www.youtube.com/watch?v=YOUR_YOUTUBE_VIDEO_ID

     「v=」の後ろにある文字列が動画IDです。

     短縮URL例
     https://youtu.be/YOUR_YOUTUBE_VIDEO_ID

     短縮URLの場合は「youtu.be/」の後ろにある文字列が動画IDです。

  3. 取得した動画IDを、下記の
     YOUR_YOUTUBE_VIDEO_ID
     と置き換えてください。

  例
  const youtubeVideoId="取得した動画ID";

  YouTubeページのURL全体ではなく、動画IDだけを設定します。
*/

// 表示するYouTube動画ID
const youtubeVideoId="YOUR_YOUTUBE_VIDEO_ID";

// YouTube動画を開くボタンをクリックした時
youtubeModalOpen.addEventListener("click",function(){

  // 動画IDからYouTubeの埋め込みURLを作成
  youtubeModalPlayer.src=
    "https://www.youtube.com/embed/"
    +youtubeVideoId;

  // モーダル背景へ表示用クラスを追加
  youtubeModalOverlay.classList.add("is-active");

});

// モーダルを閉じるボタンをクリックした時
youtubeModalClose.addEventListener("click",function(){

  // モーダル背景から表示用クラスを削除
  youtubeModalOverlay.classList.remove("is-active");

  // iframeのURLを空にして動画の再生を停止
  youtubeModalPlayer.src="";

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではYouTube動画を開くボタン、モーダルウインドウ、動画を表示するiframeを配置します。CSSでは操作エリアやモーダルのサイズ、背景色、余白、角丸、動画の表示比率、表示時のアニメーションなどを設定し、JavaScriptではボタンをクリックしたときのモーダル表示とYouTube動画の読み込み、閉じたときの動画停止を行います。

YouTube動画そのものをサンプル一式へ含める必要はありません。表示したいYouTube動画の動画IDを利用者自身で確認し、script.js内のYOUR_YOUTUBE_VIDEO_IDへ設定して使用します。YouTubeページのURL全体ではなく、URLから取得した動画IDだけを設定します。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.htmlはYouTube動画モーダルのHTML構造を作るファイルです。「YouTube動画モーダル」のタイトル、説明文、「動画を再生」ボタン、モーダル内のタイトル、「閉じる」ボタンなどの表示内容を変更できます。YouTube動画を表示するiframeもこのファイルにありますが、表示する動画のURLはJavaScriptから設定するため、iframeのsrc属性へ動画URLを直接入力する必要はありません。

style.cssは操作エリアとモーダルウインドウのデザインを設定するファイルです。操作エリアやモーダルの横幅、余白、背景色、文字色、ボタンの色、角丸、影、動画表示エリアの比率、モーダル表示時のアニメーションなどを変更できます。

script.jsはモーダルウインドウとYouTube動画の動作を設定するファイルです。表示するYouTube動画の動画IDを設定し、「動画を再生」をクリックすると動画IDからYouTubeの埋め込みURLを作成してiframeへ設定します。モーダルを開いた時点では動画は自動再生されないため、動画プレーヤーの再生ボタンを押すと再生できます。「閉じる」をクリックするとモーダルを非表示にし、iframeのURLを空にして動画の再生を停止します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルは同じ階層へ保存してください。次に、YouTubeでモーダルウインドウへ表示したい動画を開き、動画IDを確認します。

通常のYouTube URLがhttps://www.youtube.com/watch?v=YOUR_YOUTUBE_VIDEO_IDの形式の場合は、v=の後ろにある文字列が動画IDです。短縮URLがhttps://youtu.be/YOUR_YOUTUBE_VIDEO_IDの形式の場合は、youtu.be/の後ろにある文字列が動画IDです。

取得した動画IDをscript.js内のYOUR_YOUTUBE_VIDEO_IDと置き換えます。たとえば動画IDが取得できた場合は、const youtubeVideoId="取得した動画ID";のように設定します。YouTubeページのURL全体ではなく、動画IDだけを設定してください。

動画IDを設定したあと、sample/index.htmlをブラウザで開きます。「動画を再生」をクリックするとモーダルウインドウが表示され、設定したYouTube動画が読み込まれます。動画プレーヤーの再生ボタンを押すと動画を再生できます。「閉じる」をクリックするとモーダルが閉じ、再生中の場合は動画の再生も停止します。

カスタマイズできる内容
index.htmlでは「YouTube動画モーダル」のタイトル、説明文、「動画を再生」ボタン、モーダル内の「YouTube動画」というタイトル、「閉じる」ボタンなどの文章を変更できます。

style.cssでは操作エリアとモーダルの横幅、余白、背景色、文字色、ボタンの背景色、角丸、影、動画表示エリアの比率、モーダル表示時のアニメーションなどを変更できます。

script.jsではYOUR_YOUTUBE_VIDEO_IDを別のYouTube動画IDへ置き換えることで、モーダルウインドウに表示する動画を変更できます。JavaScriptでは動画IDを使ってhttps://www.youtube.com/embed/動画IDの形式の埋め込みURLを作成します。このサンプルではautoplay=1を付けていないため、モーダルを開いただけでは動画は自動再生されません。自動再生したい場合は、script.jsで作成している埋め込みURLの末尾に?autoplay=1を追加し、“https://www.youtube.com/embed/”+youtubeVideoId+”?autoplay=1”の形式に変更します。

数値調整
style.css
max-width:760px;
操作エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

margin:40px auto;
操作エリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
操作エリアの内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。

border-radius:18px;
操作エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:22px;
操作エリアのタイトルとモーダルタイトルに使用している文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。

margin:0 0 24px;
操作エリアの説明文の下側余白です。24pxを大きくすると「動画を再生」ボタンとの間隔が広がり、小さくすると狭くなります。

padding:12px 28px;
「動画を再生」ボタンの内側余白です。上下の12pxを大きくするとボタンが高くなり、左右の28pxを大きくすると横に広がります。

padding:20px;
モーダル背景の画面端との余白と、モーダル本体の内側余白に使用しています。それぞれの値を変更すると、画面端との間隔や動画周囲の余白を調整できます。

max-width:900px;
モーダル本体の最大横幅です。値を大きくするとモーダルと動画の表示領域が広がり、小さくすると狭くなります。

margin:0 0 18px;
モーダルタイトルの下側余白です。18pxを大きくすると動画との間隔が広がり、小さくすると狭くなります。

aspect-ratio:16 / 9;
YouTube動画表示エリアの横幅と高さの比率です。このサンプルでは横16・縦9の比率で表示します。

border-radius:12px;
YouTube動画表示エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

margin:18px auto 0;
「閉じる」ボタンの上側余白です。18pxを大きくすると動画との間隔が広がり、小さくすると狭くなります。

animation:youtube-modal_show .3s ease forwards;
モーダルを表示するときのアニメーション時間です。.3sは0.3秒を表し、値を大きくするとゆっくり、小さくすると速く表示されます。

transform:scale(.9);
モーダル表示アニメーション開始時の大きさです。.9は通常サイズの90%を表します。値を小さくすると、表示時の拡大幅が大きくなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのモーダル本体にwidth:100%とmax-width:900pxを指定しているため、画面幅が狭くなるとモーダルも自動的に縮小します。YouTube動画表示エリアにはwidth:100%とaspect-ratio:16 / 9を使用しているため、横幅に合わせながら16:9の比率を維持して表示されます。

また、640px以下ではメディアクエリにより操作エリアの余白をpadding:24px 18px;、モーダル本体の余白をpadding:16px;へ変更しています。これにより、スマートフォン・タブレット・PCの画面幅に合わせて利用できます。