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

YouTube動画をドロップダウンメニューに表示する方法

YouTube動画をドロップダウンメニューに表示する方法を紹介します。このサンプルでは、「動画メニュー」ボタンをクリックすると3件の動画タイトルがドロップダウンメニューとして表示され、見たい動画のタイトルをクリックすると、その項目の直下へYouTube動画を展開します。もう一度同じタイトルをクリックすると動画を閉じることができ、別のタイトルを選択した場合は開いていた動画を閉じて選択した動画へ切り替えます。

商品やサービスの紹介ページ、オンライン講座、操作方法をまとめたページ、会員サイトなど、複数のYouTube動画をコンパクトなメニューから選択できるようにしたい場面で利用できます。最初からすべての動画を縦に並べるのではなく、動画タイトルをメニューとしてまとめられるため、利用者はタイトルを確認してから見たい動画だけを展開できます。

HTMLではメニューボタンの文章、3件の動画タイトル、YouTube動画の埋め込みURLを変更できます。CSSではメニューの横幅、余白、背景色、角丸、影、動画の表示サイズなどを調整でき、JavaScriptではドロップダウンメニューの開閉と動画の切り替えを行います。動画は16:9の比率を維持しながらメニューの横幅に合わせて縮小されるため、スマートフォン・タブレット・PCで利用できます。

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

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

デモ

「動画メニュー」をクリックすると3件の動画タイトルが表示されます。各タイトルをクリックすると、その項目の下にYouTube動画が展開されます。

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

<!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>

  <!-- ドロップダウンメニュー全体 -->
  <div class="youtube-video-dropdown-menu_wrap">

    <!-- タイトル -->
    <div class="youtube-video-dropdown-menu_title">
      YouTube動画をドロップダウンメニューに表示
    </div>

    <!-- 説明文 -->
    <p class="youtube-video-dropdown-menu_text">
      動画メニューから見たいYouTube動画を選択できます。
    </p>

    <!-- メニュー配置エリア -->
    <div class="youtube-video-dropdown-menu_group">

      <div class="youtube-video-dropdown-menu_area">

        <!-- ドロップダウンメニューを開閉するボタン -->
        <button
          class="youtube-video-dropdown-menu_button"
          type="button"
          data-youtube-video-dropdown-menu-button="">
          動画メニュー
          <span class="youtube-video-dropdown-menu_arrow">▼</span>
        </button>

        <!-- 動画メニュー -->
        <ul
          class="youtube-video-dropdown-menu_list"
          data-youtube-video-dropdown-menu-list="">

          <!-- 動画1 -->
          <li class="youtube-video-dropdown-menu_item">

            <button
              type="button"
              class="youtube-video-dropdown-menu_video-button"
              data-youtube-video-dropdown-menu-video-button="1">
              動画1：サンプル動画
            </button>

            <div
              class="youtube-video-dropdown-menu_video"
              data-youtube-video-dropdown-menu-video="1">

              <!--
                【YouTube動画の設定方法】

                1. 表示したいYouTube動画を開きます。
                2. 動画URLの「watch?v=」より後ろにある動画IDを確認します。
                3. YOUR_VIDEO_ID_1 を取得した動画IDへ置き換えてください。

                例：
                https://www.youtube.com/watch?v=XXXXXXXXXXX
                ↓
                動画IDは XXXXXXXXXXX
              -->
              <iframe
                class="youtube-video-dropdown-menu_frame"
                src="https://www.youtube.com/embed/YOUR_VIDEO_ID_1"
                title="動画1"
                loading="lazy"
                allowfullscreen>
              </iframe>

            </div>

          </li>

          <!-- 動画2 -->
          <li class="youtube-video-dropdown-menu_item">

            <button
              type="button"
              class="youtube-video-dropdown-menu_video-button"
              data-youtube-video-dropdown-menu-video-button="2">
              動画2：サンプル動画
            </button>

            <div
              class="youtube-video-dropdown-menu_video"
              data-youtube-video-dropdown-menu-video="2">

              <!--
                YOUR_VIDEO_ID_2 を、
                2件目に表示したいYouTube動画の動画IDへ置き換えてください。
              -->
              <iframe
                class="youtube-video-dropdown-menu_frame"
                src="https://www.youtube.com/embed/YOUR_VIDEO_ID_2"
                title="動画2"
                loading="lazy"
                allowfullscreen>
              </iframe>

            </div>

          </li>

          <!-- 動画3 -->
          <li class="youtube-video-dropdown-menu_item">

            <button
              type="button"
              class="youtube-video-dropdown-menu_video-button"
              data-youtube-video-dropdown-menu-video-button="3">
              動画3：サンプル動画
            </button>

            <div
              class="youtube-video-dropdown-menu_video"
              data-youtube-video-dropdown-menu-video="3">

              <!--
                YOUR_VIDEO_ID_3 を、
                3件目に表示したいYouTube動画の動画IDへ置き換えてください。
              -->
              <iframe
                class="youtube-video-dropdown-menu_frame"
                src="https://www.youtube.com/embed/YOUR_VIDEO_ID_3"
                title="動画3"
                loading="lazy"
                allowfullscreen>
              </iframe>

            </div>

          </li>

        </ul>

      </div>

    </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; /* ページ全体で使用するフォント */
}

/* ドロップダウンメニュー全体 */
.youtube-video-dropdown-menu_wrap{
  width:100%; /* 画面幅に合わせて縮小 */
  max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側の余白。値を大きくすると余白が広がる */
  border:1px solid #e5e7eb; /* 全体を囲む枠線 */
  border-radius:18px; /* 全体の角丸 */
  background:#f8fafc; /* 全体の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タイトル */
.youtube-video-dropdown-menu_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  text-align:center; /* 中央揃え */
}

/* 説明文 */
.youtube-video-dropdown-menu_text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間 */
  text-align:center; /* 中央揃え */
}

/* メニュー配置エリア */
.youtube-video-dropdown-menu_group{
  display:flex; /* 子要素を横方向へ配置 */
  justify-content:center; /* 中央配置 */
}

/* ドロップダウンメニュー */
.youtube-video-dropdown-menu_area{
  position:relative; /* メニューの配置基準にする */
  width:100%; /* 親要素の横幅いっぱいに表示 */
  max-width:420px; /* メニューの最大横幅 */
}

/* メニュー開閉ボタン */
.youtube-video-dropdown-menu_button{
  display:flex; /* 文字と矢印を横並びにする */
  align-items:center; /* 縦方向の中央へ揃える */
  justify-content:space-between; /* 文字と矢印を左右へ配置 */
  width:100%; /* メニュー幅いっぱいに表示 */
  min-height:52px; /* 最小の高さ */
  padding:14px 18px; /* 上下14px・左右18px */
  border:none; /* 標準の枠線を削除 */
  border-radius:10px; /* ボタンの角丸 */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font:inherit; /* ページと同じフォントを使用 */
  font-size:16px; /* 文字サイズ */
  font-weight:700; /* 太字 */
  cursor:pointer; /* マウスカーソルをポインターにする */
  box-sizing:border-box; /* paddingを横幅へ含める */
}

/* 矢印 */
.youtube-video-dropdown-menu_arrow{
  flex-shrink:0; /* 矢印を縮小しない */
  margin-left:12px; /* 左側12pxの余白 */
  font-size:12px; /* 矢印の文字サイズ */
}

/* 動画メニュー */
.youtube-video-dropdown-menu_list{
  display:none; /* 通常時は非表示 */
  position:absolute; /* ボタンを基準に配置 */
  top:calc(100% + 10px); /* ボタンの10px下へ配置 */
  left:0; /* 左端を揃える */
  z-index:10; /* 周囲の要素より前面へ表示 */
  width:100%; /* ボタンと同じ横幅 */
  margin:0; /* 標準の外側余白を削除 */
  padding:8px; /* メニュー内側の余白 */
  border:1px solid #e5e7eb; /* メニューの枠線 */
  border-radius:10px; /* メニューの角丸 */
  background:#ffffff; /* メニューの背景色 */
  box-shadow:0 10px 24px rgba(15,23,42,.12); /* メニューの影 */
  list-style:none; /* リストマーカーを削除 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* メニュー表示時 */
.youtube-video-dropdown-menu_list.is-open{
  display:block; /* メニューを表示 */
}

/* 2件目以降の項目 */
.youtube-video-dropdown-menu_item + .youtube-video-dropdown-menu_item{
  margin-top:4px; /* 項目同士の間隔 */
}

/* 動画タイトルボタン */
.youtube-video-dropdown-menu_video-button{
  display:block; /* ブロック要素として表示 */
  width:100%; /* メニュー幅いっぱいに表示 */
  padding:12px 14px; /* 上下12px・左右14px */
  border:none; /* 標準の枠線を削除 */
  border-radius:8px; /* ボタンの角丸 */
  background:#ffffff; /* ボタンの背景色 */
  color:#111827; /* 文字色 */
  font:inherit; /* ページと同じフォントを使用 */
  font-size:15px; /* 文字サイズ */
  line-height:1.5; /* 行間 */
  text-align:left; /* 左揃え */
  cursor:pointer; /* マウスカーソルをポインターにする */
}

/* 動画タイトルへマウスカーソルを合わせたとき */
.youtube-video-dropdown-menu_video-button:hover{
  background:#eff6ff; /* 背景色を変更 */
}

/* 動画表示エリア */
.youtube-video-dropdown-menu_video{
  display:none; /* 通常時は非表示 */
  margin:8px 0 4px; /* 上8px・下4pxの余白 */
  overflow:hidden; /* 角丸からはみ出した部分を隠す */
  border-radius:8px; /* 動画表示部分の角丸 */
  background:#000000; /* 動画部分の背景色 */
}

/* 動画表示時 */
.youtube-video-dropdown-menu_video.is-open{
  display:block; /* 選択した動画を表示 */
}

/* YouTube動画 */
.youtube-video-dropdown-menu_frame{
  display:block; /* iframe下部の余分な隙間を防ぐ */
  width:100%; /* 親要素の横幅いっぱいに表示 */
  aspect-ratio:16 / 9; /* YouTube動画を16:9で表示 */
  border:0; /* iframeの枠線を削除 */
}

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

  /* ドロップダウンメニュー全体 */
  .youtube-video-dropdown-menu_wrap{
    padding:24px 18px; /* スマートフォンでは余白を小さくする */
  }

}

/* ドロップダウンメニューを開閉するボタンを取得 */
const youtubeVideoDropdownMenuButton=document.querySelector(
  "[data-youtube-video-dropdown-menu-button]"
);

/* 動画メニューを取得 */
const youtubeVideoDropdownMenuList=document.querySelector(
  "[data-youtube-video-dropdown-menu-list]"
);

/* 3件の動画タイトルボタンを取得 */
const youtubeVideoDropdownMenuVideoButtons=document.querySelectorAll(
  "[data-youtube-video-dropdown-menu-video-button]"
);

/* 「動画メニュー」をクリックしたとき */
youtubeVideoDropdownMenuButton.addEventListener("click",function(){

  /* ドロップダウンメニューを開閉 */
  youtubeVideoDropdownMenuList.classList.toggle("is-open");

});

/* 各動画タイトルボタンへクリック処理を設定 */
youtubeVideoDropdownMenuVideoButtons.forEach(function(button){

  button.addEventListener("click",function(){

    /* クリックした動画番号を取得 */
    const videoNumber=
      button.dataset.youtubeVideoDropdownMenuVideoButton;

    /* 対応する動画表示エリアを取得 */
    const selectedVideo=document.querySelector(
      '[data-youtube-video-dropdown-menu-video="' + videoNumber + '"]'
    );

    /* 他の動画が開いている場合は閉じる */
    document.querySelectorAll(
      "[data-youtube-video-dropdown-menu-video]"
    ).forEach(function(video){

      if(video!==selectedVideo){

        video.classList.remove("is-open");

      }

    });

    /* 選択した動画を開閉 */
    selectedVideo.classList.toggle("is-open");

  });

});

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではドロップダウンメニューと3件のYouTube動画を表示するiframeを作成し、CSSではメニューや動画表示エリアのデザインを設定します。JavaScriptでは「動画メニュー」の開閉と、各動画タイトルをクリックしたときの動画表示を制御します。

YouTube動画はiframeの埋め込みURLを使用して表示します。APIや外部JavaScriptライブラリは使用しません。表示する動画は利用者自身で用意し、index.html内のYOUR_VIDEO_ID_1、YOUR_VIDEO_ID_2、YOUR_VIDEO_ID_3を、それぞれ表示したいYouTube動画の動画IDへ置き換えて使用します。

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

各ファイルの役割
index.htmlはドロップダウンメニューとYouTube動画の表示内容を構成するファイルです。「動画メニュー」のボタン、3件の動画タイトル、動画を表示するiframeが含まれています。動画タイトルの文章を変更できるほか、YOUR_VIDEO_ID_1、YOUR_VIDEO_ID_2、YOUR_VIDEO_ID_3へ表示したいYouTube動画の動画IDを設定できます。

style.cssはドロップダウンメニューと動画表示エリアのデザインを設定するファイルです。全体の横幅や余白、背景色、ボタンの色、角丸、メニューの影、動画表示エリアのサイズなどを変更できます。

script.jsはドロップダウンメニューと動画表示を制御するファイルです。「動画メニュー」をクリックするとメニューを開閉し、メニュー内の動画タイトルをクリックすると対応する動画を開閉します。別の動画を選択した場合は、それまで開いていた動画を閉じて選択した動画を表示します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。次に、表示したいYouTube動画を開き、動画のURLから動画IDを確認してください。通常の動画URLがhttps://www.youtube.com/watch?v=XXXXXXXXXXXの場合、watch?v=より後ろにあるXXXXXXXXXXXの部分が動画IDです。

1件目の動画IDはindex.htmlのYOUR_VIDEO_ID_1、2件目はYOUR_VIDEO_ID_2、3件目はYOUR_VIDEO_ID_3へ設定します。それぞれhttps://www.youtube.com/embed/動画IDの形式でiframeのsrc属性に設定されます。動画タイトルも、それぞれ設定した動画の内容に合わせて変更してください。

3件の動画IDを設定したあと、sample/index.htmlをブラウザで開きます。「動画メニュー」をクリックすると3件の動画タイトルが表示され、見たい動画タイトルをクリックすると、その項目の下にYouTube動画が表示されます。同じ動画タイトルをもう一度クリックすると動画を閉じられます。

カスタマイズできる内容
index.htmlでは、ページ内のタイトル、説明文、「動画メニュー」の文字、3件の動画タイトル、YouTube動画IDを変更できます。表示したい動画に合わせてYOUR_VIDEO_ID_1、YOUR_VIDEO_ID_2、YOUR_VIDEO_ID_3を書き換えてください。

style.cssでは、全体の最大横幅、余白、背景色、枠線、角丸、メニューボタンの色、動画タイトルの文字サイズ、ドロップダウンメニューの横幅や影などを変更できます。JavaScriptでは動画番号とHTMLのdata-youtube-video-dropdown-menu-videoを対応させているため、動画タイトルと動画表示エリアの番号は同じ値を使用します。

数値調整
style.css
max-width:700px;
サンプル全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。

margin:40px auto;
サンプル全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
サンプル全体の内側余白です。値を大きくすると内容と枠線の間隔が広がります。

border-radius:18px;
サンプル全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。

margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると説明文と動画メニューの間隔が広がります。

max-width:420px;
ドロップダウンメニューの最大横幅です。値を大きくするとメニューが横に広がり、小さくすると狭くなります。

min-height:52px;
「動画メニュー」ボタンの最小高さです。値を大きくするとボタンが高くなります。

padding:14px 18px;
「動画メニュー」ボタンの内側余白です。14pxは上下、18pxは左右の余白を表します。

border-radius:10px;
「動画メニュー」ボタンとドロップダウンメニューの角丸です。値を大きくすると丸みが強くなります。

top:calc(100% + 10px);
ドロップダウンメニューを開閉ボタンから10px下へ離して表示します。10pxを大きくするとボタンとメニューの間隔が広がります。

padding:8px;
ドロップダウンメニュー内側の余白です。値を大きくすると動画タイトルとメニュー外枠の間隔が広がります。

margin-top:4px;
2件目以降の動画項目との間隔です。値を大きくすると各項目の間隔が広がります。

padding:12px 14px;
動画タイトルボタンの内側余白です。12pxは上下、14pxは左右の余白を表します。

font-size:15px;
動画タイトルボタンの文字サイズです。値を大きくすると文字が大きくなります。

aspect-ratio:16 / 9;
YouTube動画の縦横比です。このサンプルでは16:9の比率で動画を表示します。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-widthによって、サンプル全体とドロップダウンメニューが画面幅に合わせて縮小されます。YouTube動画もwidth:100%とaspect-ratio:16 / 9によって、横幅に合わせながら16:9の比率を維持して表示されます。

また、画面幅640px以下ではpadding:24px 18px;へ変更し、スマートフォンで左右の余白が広くなりすぎないよう調整しています。スマートフォン・タブレット・PCで利用できる構成です。