YouTube動画をタブ切り替えに表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

タブ項目・サイズ・色・余白・初期表示などを設定して、HTML・CSS・JavaScriptを自動生成できます。

YouTube動画をタブ切り替えに表示する方法

YouTube動画をタブ切り替えに表示する方法を紹介します。このサンプルでは、複数のYouTube動画を1つの表示エリアにまとめ、タブをクリックすると選択した動画だけが表示される仕組みをHTML・CSS・JavaScriptで作成します。動画ごとに大きな表示領域を用意する必要がなく、限られたスペースで複数の動画を見せたい場合に利用できます。

商品紹介ページで複数の解説動画を掲載する場合や、会員サイトの学習コンテンツ、サービス紹介ページ、操作方法をまとめたページなど、内容ごとに動画を切り替えて見せたい場面に適しています。「動画1」「動画2」「動画3」のタブをクリックすると、JavaScriptによって選択したタブと対応するYouTube動画へ表示が切り替わります。

HTMLではタブの文章や表示するYouTube動画を変更でき、CSSでは全体の横幅、余白、タブの色、枠線、角丸、動画の表示比率などを調整できます。動画部分は16:9の比率で画面幅に合わせて表示され、640px以下では全体の内側余白も小さくなるため、スマートフォン・タブレット・PCで利用できます。

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

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

デモ

YouTube動画をタブ切り替えで表示

タブをクリックすると、対応するYouTube動画だけを表示できます。

「動画1」「動画2」「動画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-tab-switch_wrap">

    <!-- タイトル -->
    <div class="youtube-tab-switch_title">
      YouTube動画をタブ切り替えで表示
    </div>

    <!-- 説明文 -->
    <p class="youtube-tab-switch_text">
      タブをクリックすると、対応するYouTube動画だけを表示できます。
    </p>

    <!-- タブ -->
    <div class="youtube-tab-switch_tabs">

      <button
        class="youtube-tab-switch_tab is-active"
        type="button"
        data-tab="video1">
        動画1
      </button>

      <button
        class="youtube-tab-switch_tab"
        type="button"
        data-tab="video2">
        動画2
      </button>

      <button
        class="youtube-tab-switch_tab"
        type="button"
        data-tab="video3">
        動画3
      </button>

    </div>

    <!-- 動画1 -->
    <div
      class="youtube-tab-switch_panel is-active"
      data-panel="video1">

      <div class="youtube-tab-switch_video">

        <!-- 動画IDを表示したいYouTube動画のIDへ変更してください -->
        <iframe
          src="https://www.youtube.com/embed/動画ID1"
          title="YouTube video 1"
          allowfullscreen>
        </iframe>

      </div>

    </div>

    <!-- 動画2 -->
    <div
      class="youtube-tab-switch_panel"
      data-panel="video2">

      <div class="youtube-tab-switch_video">

        <!-- 動画IDを表示したいYouTube動画のIDへ変更してください -->
        <iframe
          src="https://www.youtube.com/embed/動画ID2"
          title="YouTube video 2"
          allowfullscreen>
        </iframe>

      </div>

    </div>

    <!-- 動画3 -->
    <div
      class="youtube-tab-switch_panel"
      data-panel="video3">

      <div class="youtube-tab-switch_video">

        <!-- 動画IDを表示したいYouTube動画のIDへ変更してください -->
        <iframe
          src="https://www.youtube.com/embed/動画ID3"
          title="YouTube video 3"
          allowfullscreen>
        </iframe>

      </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-tab-switch_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側余白。値を大きくすると内容と枠線の間隔が広がる */
  border:1px solid #e5e7eb; /* 全体を囲む枠線 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 全体の背景色 */
  font-family:sans-serif; /* 使用するフォント */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

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

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

/* タブ一覧 */
.youtube-tab-switch_tabs{
  display:flex; /* タブを横並びにする */
  width:100%; /* 横幅いっぱいに表示 */
  border-bottom:1px solid #d1d5db; /* タブ下側の境界線 */
}

/* タブ */
.youtube-tab-switch_tab{
  flex:1; /* 3つのタブを均等幅にする */
  margin:0; /* 外側余白を削除 */
  padding:14px; /* 内側余白。値を大きくするとタブが高くなる */
  border:1px solid #d1d5db; /* タブの枠線 */
  border-bottom:none; /* 下側の枠線を削除 */
  border-radius:12px 12px 0 0; /* 上側のみ角丸にする */
  background:#ffffff; /* 通常時の背景色 */
  color:#111827; /* 通常時の文字色 */
  font:inherit; /* ページ全体と同じフォントを使用 */
  font-weight:700; /* タブ文字を太字にする */
  cursor:pointer; /* マウスポインターを指型にする */
}

/* 2つ目以降のタブ */
.youtube-tab-switch_tab + .youtube-tab-switch_tab{
  margin-left:6px; /* タブ同士の間隔。値を大きくすると間隔が広がる */
}

/* 選択中のタブ */
.youtube-tab-switch_tab.is-active{
  background:#2563eb; /* 選択中の背景色 */
  color:#ffffff; /* 選択中の文字色 */
}

/* 動画パネル */
.youtube-tab-switch_panel{
  display:none; /* 初期状態では非表示 */
  padding:18px; /* 動画周囲の内側余白 */
  border:1px solid #d1d5db; /* パネルの枠線 */
  border-top:none; /* タブとの境界部分の枠線を削除 */
  background:#ffffff; /* パネルの背景色 */
}

/* 選択中の動画パネル */
.youtube-tab-switch_panel.is-active{
  display:block; /* 選択した動画を表示 */
}

/* YouTube動画表示領域 */
.youtube-tab-switch_video{
  width:100%; /* 横幅いっぱいに表示 */
  aspect-ratio:16/9; /* 動画を16:9で表示 */
}

/* YouTube動画 */
.youtube-tab-switch_video iframe{
  display:block; /* iframe下部の余分な隙間を防ぐ */
  width:100%; /* 表示領域の横幅いっぱいに表示 */
  height:100%; /* 表示領域の高さいっぱいに表示 */
  max-width:none; /* テーマなどの最大横幅指定を解除 */
  margin:0; /* iframeの外側余白を削除 */
  border:none; /* iframe標準の枠線を削除 */
  border-radius:12px; /* 動画の角丸。値を大きくすると丸みが強くなる */
}

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

  /* タブ切り替え全体 */
  .youtube-tab-switch_wrap{
    padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
  }

  /* タブ */
  .youtube-tab-switch_tab{
    padding:12px 8px; /* スマートフォンではタブの余白を小さくする */
  }

}

// すべてのタブを取得
const youtubeTabSwitchTabs=
  document.querySelectorAll(".youtube-tab-switch_tab");

// すべての動画パネルを取得
const youtubeTabSwitchPanels=
  document.querySelectorAll(".youtube-tab-switch_panel");

// 各タブへクリック処理を設定
youtubeTabSwitchTabs.forEach(function(tab){

  // タブをクリックしたとき
  tab.addEventListener("click",function(){

    // クリックしたタブに設定されている動画名を取得
    const target=tab.dataset.tab;

    // すべてのタブから選択状態を解除
    youtubeTabSwitchTabs.forEach(function(item){

      item.classList.remove("is-active");

    });

    // すべての動画パネルを非表示状態にする
    youtubeTabSwitchPanels.forEach(function(panel){

      panel.classList.remove("is-active");

    });

    // クリックしたタブを選択状態にする
    tab.classList.add("is-active");

    // 対応する動画パネルを表示する
    document.querySelector(
      '.youtube-tab-switch_panel[data-panel="'+target+'"]'
    ).classList.add("is-active");

  });

});

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

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

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは3つのタブと、それぞれに対応するYouTube動画をiframeで配置します。CSSではタブ切り替え全体の横幅、余白、タブの色、枠線、角丸、YouTube動画の表示比率などを設定します。JavaScriptではクリックしたタブに対応する動画パネルへis-activeクラスを付け替え、表示するYouTube動画を切り替えます。

このサンプルではYouTube動画は自動再生されません。タブをクリックすると対応する動画プレーヤーへ表示が切り替わり、動画内の再生ボタンをクリックすると再生されます。自動再生したい場合は、YouTubeの埋め込みURLの末尾へ?autoplay=1を追加します。ただし、ブラウザの自動再生制限によって、音声付きの自動再生が許可されない場合があります。

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

各ファイルの役割
index.htmlはタブ切り替えとYouTube動画を構成するファイルです。「動画1」「動画2」「動画3」のタブ名、タイトル、説明文、各iframeへ設定するYouTube動画を変更できます。タブのdata-tabと動画パネルのdata-panelを同じ値にすることで、それぞれのタブと動画を対応させています。

style.cssはタブ切り替え全体とYouTube動画の表示デザインを設定するファイルです。全体の最大横幅、余白、背景色、枠線、角丸、タブの色、タブ同士の間隔、動画周囲の余白などを変更できます。YouTube動画部分にはaspect-ratio:16/9;を指定し、16:9の比率で表示します。

script.jsはタブをクリックしたときの切り替え処理を行うファイルです。クリックしたタブのdata-tabを取得し、すべてのタブと動画パネルからis-activeクラスを削除したあと、選択したタブと対応する動画パネルへis-activeクラスを追加します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。そのあとsample/index.htmlをブラウザで開いてください。初期状態では「動画1」が選択され、対応するYouTube動画が表示されます。「動画2」または「動画3」をクリックすると、選択したタブに対応する動画だけへ表示が切り替わります。

YouTube動画の設定方法
表示するYouTube動画は、index.htmlにある各iframeのsrcへ設定します。配布コードでは次の形式になっています。

https://www.youtube.com/embed/動画ID1
https://www.youtube.com/embed/動画ID2
https://www.youtube.com/embed/動画ID3

まず、表示したいYouTube動画を開いてURLを確認します。たとえば次のURLの場合です。

https://www.youtube.com/watch?v=kAiX0itnonM

v=より後ろにあるkAiX0itnonMが動画IDです。この動画を「動画1」へ表示する場合は、次のように設定します。

src="https://www.youtube.com/embed/kAiX0itnonM"

「動画2」「動画3」も同じ方法で、それぞれ表示したいYouTube動画のIDへ変更してください。

動画を自動再生する場合
YouTube動画を自動再生したい場合は、各iframeの埋め込みURLの末尾へ?autoplay=1を追加します。

通常の埋め込みURLが次の場合、

https://www.youtube.com/embed/kAiX0itnonM

自動再生する場合は次のように変更します。

https://www.youtube.com/embed/kAiX0itnonM?autoplay=1

iframeでは次のようにsrcを変更し、allowへautoplayを指定します。

<iframe src="https://www.youtube.com/embed/kAiX0itnonM?autoplay=1" title="YouTube video 1" allow="autoplay" allowfullscreen></iframe>

「動画2」「動画3」も自動再生する場合は、それぞれの埋め込みURLへ同じように?autoplay=1を追加します。ただし、ブラウザの自動再生ポリシーによって、音声付き動画の自動再生がブロックされる場合があります。

カスタマイズできる内容
index.htmlでは、「YouTube動画をタブ切り替えで表示」のタイトル、説明文、「動画1」「動画2」「動画3」のタブ名、各タブへ表示するYouTube動画を変更できます。タブと動画の対応関係を変更するときは、タブ側のdata-tabと動画パネル側のdata-panelを同じ値にしてください。また、各YouTube動画の埋め込みURLへ?autoplay=1を追加することで自動再生を指定できます。

style.cssでは全体の最大横幅、余白、背景色、枠線、角丸、タブの内側余白、タブ間隔、選択中のタブの色、動画周囲の余白、動画の角丸などを変更できます。

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

margin:40px auto;
タブ切り替え全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
タブ切り替え全体の内側余白です。値を大きくすると内容と外側の枠線との間隔が広がります。

border-radius:18px;
タブ切り替え全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

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

margin:0 0 24px;
説明文の下側余白です。24pxを大きくするとタブとの間隔が広がり、小さくすると狭くなります。

padding:14px;
タブの内側余白です。値を大きくするとタブが高くなり、小さくすると低くなります。

border-radius:12px 12px 0 0;
タブ上部の角丸です。12pxを大きくすると上側の丸みが強くなり、小さくすると角張った表示になります。

margin-left:6px;
2つ目以降のタブとの間隔です。6pxを大きくするとタブ同士の間隔が広がり、小さくすると近くなります。

padding:18px;
YouTube動画周囲の内側余白です。値を大きくすると動画とパネルの枠との間隔が広がり、小さくすると狭くなります。

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

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

@media (max-width:640px)
画面幅640px以下でスマートフォン向けの表示へ切り替える基準です。全体の内側余白をpadding:24px 18px;、タブの内側余白をpadding:12px 8px;へ変更します。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでタブ切り替え全体にwidth:100%とmax-width:700pxを指定しているため、画面幅に合わせて全体が縮小します。YouTube動画にもwidth:100%とaspect-ratio:16/9を指定しているため、横幅に合わせて16:9の比率を保ったまま表示されます。また、画面幅640px以下では全体とタブの内側余白を小さくしているため、スマートフォン・タブレット・PCで利用できます。