YouTube動画をカルーセルで表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

YouTube動画をカルーセルで表示する方法

YouTube動画をカルーセルで表示する方法をHTML・CSS・JavaScriptで紹介します。複数のYouTube動画を1つのエリアにまとめ、前へ・次へボタンやドットナビをクリックして切り替えられるサンプルです。動画一覧を縦に長く並べずに整理できるため、ページをすっきり見せたい場合に便利です。

このサンプルでは、各スライドにYouTubeの埋め込みiframeを配置し、JavaScriptで表示する動画を切り替えます。レッスン動画、商品紹介動画、使い方動画、レビュー動画など、複数の動画を順番に見せたいWebページで利用できます。タブ切り替えとは異なり、カルーセル形式で前後の動画へ移動できる点が特徴です。

表示する動画は、YouTube動画URLに含まれる動画IDをiframeのURLへ入れるだけで変更できます。動画数を増やす場合は、スライドとドットナビを追加することで対応できます。HTML・CSS・JavaScriptを分けた構成なので、初心者でもカスタマイズしやすい形で実装できます。

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

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

デモ

このデモでは、前へ・次へボタンやドットナビをクリックすると、表示するYouTube動画を切り替えられます。複数の動画を1つのカルーセル内で順番に表示できます。

デモ表示について

配布用コードではYouTube動画は中央に表示されますが、この記事内のデモはWordPressテーマのCSSの影響により表示位置が異なる場合があります。実際のレイアウトや動作は配布用コードをご利用ください。

動画1

動画2

動画3

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

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

    <!-- カルーセル本体 -->
    <div class="youtube-carousel_box">

      <!-- 横にスライドする動画一覧 -->
      <div class="youtube-carousel_track" id="youtube-carousel-track">

        <!-- 動画1 -->
        <div class="youtube-carousel_slide">

          <!-- 動画タイトル：自由に変更可能 -->
          <div class="youtube-carousel_title">
            動画1
          </div>

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

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

              ① YouTubeで表示したい動画を開く

              ② URLを確認する

                 例）
                 

              ③ 「v=」以降の文字列が動画IDです

                 動画ID
                 mj0vxJuMD0A

              ④ 下記の「動画ID1」を置き換えてください
            -->
            <iframe
              src="https://www.youtube.com/embed/動画ID1"
              title="動画1"
              allowfullscreen>
            </iframe>

          </div>

        </div>

        <!-- 動画2 -->
        <div class="youtube-carousel_slide">

          <div class="youtube-carousel_title">
            動画2
          </div>

          <div class="youtube-carousel_video">

            <!-- 「動画ID2」を表示したい動画へ変更 -->
            <iframe
              src="https://www.youtube.com/embed/動画ID2"
              title="動画2"
              allowfullscreen>
            </iframe>

          </div>

        </div>

        <!-- 動画3 -->
        <div class="youtube-carousel_slide">

          <div class="youtube-carousel_title">
            動画3
          </div>

          <div class="youtube-carousel_video">

            <!-- 「動画ID3」を表示したい動画へ変更 -->
            <iframe
              src="https://www.youtube.com/embed/動画ID3"
              title="動画3"
              allowfullscreen>
            </iframe>

          </div>

        </div>

      </div>

    </div>

    <!-- 操作ボタン -->
    <div class="youtube-carousel_controls">

      <!-- 前へボタン -->
      <button
        class="youtube-carousel_arrow youtube-carousel_prev"
        id="youtube-carousel-prev"
        type="button"
        aria-label="前へ">
        前へ
      </button>

      <!-- ドットナビ -->
      <div class="youtube-carousel_dots">

        <button
          class="youtube-carousel_dot is-active"
          type="button"
          data-index="0"
          aria-label="動画1">
        </button>

        <button
          class="youtube-carousel_dot"
          type="button"
          data-index="1"
          aria-label="動画2">
        </button>

        <button
          class="youtube-carousel_dot"
          type="button"
          data-index="2"
          aria-label="動画3">
        </button>

      </div>

      <!-- 次へボタン -->
      <button
        class="youtube-carousel_arrow youtube-carousel_next"
        id="youtube-carousel-next"
        type="button"
        aria-label="次へ">
        次へ
      </button>

    </div>

  </div>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0;  /* ページ外側の余白 */
  padding:40px 20px;  /* ページ内側の余白 */
  background:#f8fafc;  /* 背景色 */
  font-family:sans-serif;  /* フォント */
}

/* YouTubeカルーセル全体 */
.youtube-carousel_demo{
  max-width:900px;  /* 最大横幅 */
  margin:0 auto;  /* 中央配置 */
}

/* カルーセル本体 */
.youtube-carousel_box{
  overflow:hidden;  /* はみ出したスライドを隠す */
  border:1px solid #dbeafe;  /* 枠線 */
  border-radius:20px;  /* 角丸 */
  background:#ffffff;  /* 背景色 */
  box-shadow:0 12px 30px rgba(15,23,42,.08);  /* 影 */
}

/* スライド一覧 */
.youtube-carousel_track{
  display:flex;  /* 横並び */
  transition:transform .45s ease;  /* 切り替え速度：大きくすると遅く、小さくすると速くなる */
}

/* スライド */
.youtube-carousel_slide{
  flex:0 0 100%;  /* 1画面に1枚表示 */
  padding:28px;  /* 内側余白 */
  box-sizing:border-box;  /* paddingを幅に含める */
}

/* 動画タイトル */
.youtube-carousel_title{
  margin:0 0 18px;  /* 下余白 */
  text-align:center;  /* 中央揃え */
  font-size:28px;  /* 文字サイズ */
  font-weight:700;  /* 太字 */
  color:#0f172a;  /* 文字色 */
}

/* 動画表示エリア */
.youtube-carousel_video{
  width:100%;  /* 横幅 */
  aspect-ratio:16 / 9;  /* 16:9で表示 */
}

/* iframe */
.youtube-carousel_video iframe{
  display:block;  /* 余白をなくす */
  width:100%;  /* 横幅いっぱい */
  height:100%;  /* 高さいっぱい */
  border:none;  /* 枠線なし */
  border-radius:14px;  /* 角丸 */
}

/* 操作ボタンエリア */
.youtube-carousel_controls{
  display:flex;  /* 横並び */
  justify-content:center;  /* 中央配置 */
  align-items:center;  /* 縦中央 */
  gap:16px;  /* ボタン同士の間隔 */
  margin-top:22px;  /* 上余白 */
}

/* 前へ・次へボタン */
.youtube-carousel_arrow{
  position:relative;  /* 矢印の基準 */
  width:48px;  /* 横幅 */
  height:48px;  /* 高さ */
  padding:0;
  border:none;
  border-radius:50%;  /* 円形 */
  background:#2563eb;  /* ボタン色 */
  cursor:pointer;
  font-size:0;  /* テキストを非表示 */
}

/* 矢印 */
.youtube-carousel_arrow::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:11px;  /* 矢印サイズ */
  height:11px;  /* 矢印サイズ */
  border-top:3px solid #ffffff;
  border-right:3px solid #ffffff;
}

/* 前へ */
.youtube-carousel_prev::before{
  transform:translate(-40%,-50%) rotate(-135deg);
}

/* 次へ */
.youtube-carousel_next::before{
  transform:translate(-60%,-50%) rotate(45deg);
}

/* ドットナビ */
.youtube-carousel_dots{
  display:flex;
  gap:10px;  /* ドット同士の間隔 */
}

/* ドット */
.youtube-carousel_dot{
  width:12px;  /* サイズ */
  height:12px;  /* サイズ */
  padding:0;
  border:none;
  border-radius:50%;
  background:#cbd5e1;  /* 通常色 */
  cursor:pointer;
}

/* 選択中のドット */
.youtube-carousel_dot.is-active{
  background:#2563eb;
}

/* スマホ表示 */
@media(max-width:600px){

  /* スライド */
  .youtube-carousel_slide{
    padding:20px;  /* 内側余白 */
  }

  /* タイトル */
  .youtube-carousel_title{
    font-size:22px;  /* 文字サイズ */
  }

}

// カルーセル本体を取得
const youtubeCarouselTrack=document.getElementById("youtube-carousel-track");

// スライド一覧を取得
const youtubeCarouselSlides=document.querySelectorAll(".youtube-carousel_slide");

// ドットナビを取得
const youtubeCarouselDots=document.querySelectorAll(".youtube-carousel_dot");

// 前へボタンを取得
const youtubeCarouselPrev=document.getElementById("youtube-carousel-prev");

// 次へボタンを取得
const youtubeCarouselNext=document.getElementById("youtube-carousel-next");

// 現在表示中のスライド番号
let youtubeCarouselCurrent=0;

// 指定したスライドを表示
function youtubeCarouselShow(index){

  // 最初より前へ移動した場合は最後へ
  if(index<0){

    youtubeCarouselCurrent=youtubeCarouselSlides.length-1;

  // 最後より次へ移動した場合は最初へ
  }else if(index>=youtubeCarouselSlides.length){

    youtubeCarouselCurrent=0;

  // 通常の移動
  }else{

    youtubeCarouselCurrent=index;

  }

  // スライドを横方向へ移動
  youtubeCarouselTrack.style.transform=
    "translateX(-"+(youtubeCarouselCurrent*100)+"%)";

  // すべてのドットを通常状態に戻す
  youtubeCarouselDots.forEach(function(dot){

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

  });

  // 現在のドットを選択状態にする
  youtubeCarouselDots[youtubeCarouselCurrent].classList.add("is-active");

}

// 前へボタンをクリック
youtubeCarouselPrev.addEventListener("click",function(){

  youtubeCarouselShow(youtubeCarouselCurrent-1);

});

// 次へボタンをクリック
youtubeCarouselNext.addEventListener("click",function(){

  youtubeCarouselShow(youtubeCarouselCurrent+1);

});

// ドットナビをクリック
youtubeCarouselDots.forEach(function(dot){

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

    youtubeCarouselShow(Number(this.dataset.index));

  });

});

// 初期表示
youtubeCarouselShow(0);

配布用コードの実行結果

配布用コードでは、YouTube動画は中央に表示されます。

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptの3ファイルで構成されています。HTMLにカルーセルのレイアウトとYouTube動画を埋め込むiframeを配置し、CSSでデザインを整え、JavaScriptで前へ・次へボタンやドットナビによるスライド切り替えを行います。

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

sampleフォルダをそのまま配置し、ブラウザで sample/index.html を開くと動作を確認できます。

表示するYouTube動画は index.html の各 iframe の src 属性を変更してください。通常のYouTubeページのURLではなく、https://www.youtube.com/embed/動画ID の形式を指定します。動画IDは、通常のURL（例：https://www.youtube.com/watch?v=XXXXXXXXXXX）の v= 以降の文字列です。

動画タイトルやタブ名は index.html を編集することで自由に変更できます。色・余白・ボタンデザイン・角丸などの見た目は style.css で調整してください。

スライドの切り替え処理や、前へ・次へボタン、ドットナビの動作は script.js にまとめられています。このサンプルには自動再生や待機時間などの調整項目はありません。