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

画像・画像比率・角丸・矢印ボタン・ドット・色などを設定して、HTML・CSS・JavaScriptを自動生成できます。

YouTube動画をスライダーで表示する方法

YouTube動画を1本ずつ切り替えて表示できるスライダーを作る方法を紹介します。このサンプルでは、複数のYouTube動画を同じ表示領域で切り替えられるようにし、左右のボタンをクリックすると前後の動画へ移動できます。動画下のドットから表示したい動画を直接選択することもできるため、限られたスペースへ複数のYouTube動画をまとめて設置したい場合に利用できます。

ページを開いた時点では1本目のYouTube動画だけを読み込み、2本目以降は実際に表示したタイミングでiframeを生成します。そのため、最初からすべてのYouTube動画をiframeで読み込む構成を避けられます。一度読み込んだ動画のiframeは削除せずに保持するため、前の動画へ戻った場合も同じiframeをそのまま再表示します。

HTMLではYouTubeの動画IDを設定し、CSSでは16:9の動画表示領域、左右のボタン、ドットなどを整えます。JavaScriptでは現在表示している動画を管理し、必要になった動画だけを読み込む処理とスライド切り替えを行います。YouTube動画を複数掲載したい場合や、動画一覧を大きなプレーヤーで1本ずつ見せたい場合などに使いやすい構成です。

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

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

デモ

YouTube動画スライダー

左右のボタンまたはドットでYouTube動画を切り替えられます。

動画を読み込んでいます

この動画は表示したときに読み込みます

最初は1本目の動画だけを読み込みます。2本目・3本目は初めて表示したときに読み込み、一度読み込んだ動画はそのまま保持するため、前の動画へ戻ってもiframeを作り直しません。

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

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

    <!-- 前の動画へ移動するボタン -->
    <button
      class="youtube-slider_button youtube-slider_prev"
      type="button"
      aria-label="前の動画">

      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M15 18l-6-6 6-6"></path>
      </svg>

    </button>

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

      <!--
        【YouTube動画の設定方法】
        data-video-idへYouTube動画IDを入力してください。

        例：
        https://www.youtube.com/watch?v=XXXXXXXXXXX

        上記URLの場合は
        XXXXXXXXXXX
        の部分が動画IDです。

        iframeは最初からすべて読み込まず、
        各動画を初めて表示したときにJavaScriptで生成します。
      -->

      <!-- 1本目の動画 -->
      <div
        class="youtube-slider_item is-active"
        data-video-id="YOUR_VIDEO_ID_1">

        <p class="youtube-slider_loading">
          動画を読み込んでいます
        </p>

      </div>

      <!-- 2本目の動画 -->
      <div
        class="youtube-slider_item"
        data-video-id="YOUR_VIDEO_ID_2">

        <p class="youtube-slider_loading">
          この動画は表示したときに読み込みます
        </p>

      </div>

      <!-- 3本目の動画 -->
      <div
        class="youtube-slider_item"
        data-video-id="YOUR_VIDEO_ID_3">

        <p class="youtube-slider_loading">
          この動画は表示したときに読み込みます
        </p>

      </div>

    </div>

    <!-- 次の動画へ移動するボタン -->
    <button
      class="youtube-slider_button youtube-slider_next"
      type="button"
      aria-label="次の動画">

      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M9 6l6 6-6 6"></path>
      </svg>

    </button>

  </div>

  <!-- 動画選択用ドット -->
  <div class="youtube-slider_dots" aria-label="動画を選択">

    <button
      class="youtube-slider_dot is-active"
      type="button"
      aria-label="1本目の動画">
    </button>

    <button
      class="youtube-slider_dot"
      type="button"
      aria-label="2本目の動画">
    </button>

    <button
      class="youtube-slider_dot"
      type="button"
      aria-label="3本目の動画">
    </button>

  </div>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
}

/* スライダー本体 */
.youtube-slider_area{
  display:flex; /* 左ボタン・動画・右ボタンを横方向へ並べる */
  align-items:center; /* 各要素を上下中央へ揃える */
  width:100%; /* 設置した場所の横幅いっぱいに表示 */
  gap:18px; /* ボタンと動画の間隔。値を大きくすると間隔が広がる */
  box-sizing:border-box; /* 横幅の計算を安定させる */
}

/* 前後ボタン */
.youtube-slider_button{
  display:flex; /* SVGを中央へ配置する */
  flex:0 0 48px; /* ボタンの横幅を48pxに固定。値を変更すると横幅が変わる */
  align-items:center; /* SVGを上下中央へ配置 */
  justify-content:center; /* SVGを左右中央へ配置 */
  width:48px; /* ボタンの横幅。値を大きくするとボタンが大きくなる */
  height:48px; /* ボタンの高さ。値を大きくするとボタンが大きくなる */
  padding:0; /* ボタン内側の余白を削除 */
  border:0; /* ブラウザ標準の枠線を削除 */
  border-radius:50%; /* ボタンを円形にする */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* SVG矢印の色 */
  cursor:pointer; /* クリックできることを示す */
}

/* 操作できないボタン */
.youtube-slider_button:disabled{
  background:#cbd5e1; /* 操作できないボタンの背景色 */
  cursor:default; /* 通常のカーソルへ戻す */
}

/* ボタン内のSVG */
.youtube-slider_button svg{
  width:24px; /* SVGの横幅。値を大きくすると矢印が大きくなる */
  height:24px; /* SVGの高さ。値を大きくすると矢印が大きくなる */
  fill:none; /* SVG内部を塗りつぶさない */
  stroke:currentColor; /* ボタンのcolorを矢印色として使用 */
  stroke-width:2; /* 矢印線の太さ。値を大きくすると太くなる */
  stroke-linecap:round; /* 線の端を丸くする */
  stroke-linejoin:round; /* 線の接続部分を丸くする */
}

/* 動画表示エリア */
.youtube-slider_view{
  position:relative; /* 各動画を重ねて配置する基準 */
  flex:1; /* ボタン以外の残りの横幅を使用 */
  min-width:0; /* 狭い画面でも正しく縮小できるようにする */
  aspect-ratio:16 / 9; /* YouTube動画の表示領域を16:9にする */
  overflow:hidden; /* 表示領域からはみ出した部分を隠す */
  border-radius:16px; /* 動画表示領域の角丸。値を大きくすると丸みが強くなる */
  background:#000000; /* 動画読み込み前の背景色 */
}

/* 各スライド */
.youtube-slider_item{
  position:absolute; /* すべての動画を同じ位置へ配置 */
  inset:0; /* 上下左右0の位置へ配置 */
  display:none; /* 通常は動画を非表示 */
  width:100%; /* 動画表示領域の横幅いっぱいにする */
  height:100%; /* 動画表示領域の高さいっぱいにする */
}

/* 表示中のスライド */
.youtube-slider_item.is-active{
  display:block; /* 選択中の動画だけ表示 */
}

/* YouTube動画 */
.youtube-slider_item iframe{
  display:block; /* iframe下にできる余白をなくす */
  width:100%; /* 動画表示領域の横幅いっぱいに表示 */
  height:100%; /* 動画表示領域の高さいっぱいに表示 */
  border:0; /* iframe標準の枠線を削除 */
}

/* 動画読み込み前の表示 */
.youtube-slider_loading{
  display:flex; /* 文字を中央へ配置 */
  width:100%; /* 表示領域の横幅いっぱいにする */
  height:100%; /* 表示領域の高さいっぱいにする */
  align-items:center; /* 文字を上下中央へ配置 */
  justify-content:center; /* 文字を左右中央へ配置 */
  margin:0; /* p要素の標準余白を削除 */
  padding:20px; /* 文字の周囲に20pxの余白を付ける */
  color:#ffffff; /* 読み込み前の文字色 */
  font-size:16px; /* 読み込み前の文字サイズ。値を大きくすると文字が大きくなる */
  text-align:center; /* 文字を中央揃えにする */
  box-sizing:border-box; /* paddingを横幅と高さに含める */
}

/* ドット全体 */
.youtube-slider_dots{
  display:flex; /* ドットを横方向へ並べる */
  justify-content:center; /* ドットを中央へ配置 */
  gap:10px; /* ドット同士の間隔。値を大きくすると間隔が広がる */
  margin-top:24px; /* 動画との間隔。値を大きくすると広がる */
}

/* 各ドット */
.youtube-slider_dot{
  width:12px; /* ドットの横幅。値を大きくするとドットが大きくなる */
  height:12px; /* ドットの高さ。値を大きくするとドットが大きくなる */
  padding:0; /* 内側余白を削除 */
  border:0; /* ブラウザ標準の枠線を削除 */
  border-radius:50%; /* ドットを円形にする */
  background:#cbd5e1; /* 通常時のドット色 */
  cursor:pointer; /* クリックできることを示す */
}

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

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

  /* ページ全体 */
  body{
    padding:24px 12px; /* スマートフォンでは画面端の余白を小さくする */
  }

  /* スライダー本体 */
  .youtube-slider_area{
    gap:8px; /* スマートフォンではボタンと動画の間隔を狭くする */
  }

  /* 前後ボタン */
  .youtube-slider_button{
    flex-basis:42px; /* スマートフォンではボタンの横幅を42pxにする */
    width:42px; /* スマートフォンでのボタン横幅 */
    height:42px; /* スマートフォンでのボタン高さ */
  }

  /* ボタン内のSVG */
  .youtube-slider_button svg{
    width:22px; /* スマートフォンでのSVG横幅 */
    height:22px; /* スマートフォンでのSVG高さ */
  }

}

/* スライダーで使用する要素を取得 */
const sliderArea = document.querySelector('.youtube-slider_area');
const items = sliderArea.querySelectorAll('.youtube-slider_item');
const dots = document.querySelectorAll('.youtube-slider_dot');
const prevButton = sliderArea.querySelector('.youtube-slider_prev');
const nextButton = sliderArea.querySelector('.youtube-slider_next');

/* 最初に表示する動画番号 */
let currentIndex = 0;

/* 初めて表示した動画だけiframeを生成 */
function loadVideo(index){

  /* 読み込む動画を取得 */
  const item = items[index];

  /* すでに読み込み済みの場合は処理しない */
  if(item.dataset.loaded === 'true'){
    return;
  }

  /* HTMLのdata-video-idからYouTube動画IDを取得 */
  const videoId = item.dataset.videoId;

  /* YouTube iframeを作成 */
  const iframe = document.createElement('iframe');

  /* YouTube埋め込みURLへ動画IDを設定 */
  iframe.src = `https://www.youtube.com/embed/${videoId}`;

  /* iframeのタイトルを設定 */
  iframe.title = `${index + 1}本目のYouTube動画`;

  /* YouTube動画で使用する機能を許可 */
  iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';

  /* 全画面表示を許可 */
  iframe.allowFullscreen = true;

  /* 読み込み前の表示をiframeへ置き換える */
  item.replaceChildren(iframe);

  /* 読み込み済みとして記録 */
  item.dataset.loaded = 'true';

}

/* 現在の表示状態を更新 */
function updateSlider(){

  /* 現在表示する動画だけ必要に応じて読み込む */
  loadVideo(currentIndex);

  /* 現在選択している動画だけ表示 */
  items.forEach((item, index) => {
    item.classList.toggle('is-active', index === currentIndex);
  });

  /* 現在の動画に対応するドットを選択状態にする */
  dots.forEach((dot, index) => {
    dot.classList.toggle('is-active', index === currentIndex);
  });

  /* 最初の動画では前ボタンを無効にする */
  prevButton.disabled = currentIndex === 0;

  /* 最後の動画では次ボタンを無効にする */
  nextButton.disabled = currentIndex === items.length - 1;

}

/* 前ボタンをクリック */
prevButton.addEventListener('click', () => {

  /* 最初の動画より前へ移動しない */
  if(currentIndex > 0){
    currentIndex--;
    updateSlider();
  }

});

/* 次ボタンをクリック */
nextButton.addEventListener('click', () => {

  /* 最後の動画より後ろへ移動しない */
  if(currentIndex < items.length - 1){
    currentIndex++;
    updateSlider();
  }

});

/* 各ドットをクリック */
dots.forEach((dot, index) => {

  dot.addEventListener('click', () => {

    /* クリックしたドットに対応する動画へ移動 */
    currentIndex = index;

    /* 表示を更新 */
    updateSlider();

  });

});

/* 最初は1本目の動画だけ読み込んで表示 */
updateSlider();

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。 免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

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

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

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLには3本分のYouTube動画ID、左右の切り替えボタン、動画を直接選択する3つのドットを設定します。CSSでは16:9の動画表示領域やボタン、ドットを整え、JavaScriptでは動画の切り替えとiframeの読み込みを行います。最初から3本すべてのiframeを生成するのではなく、ページを開いた時点では1本目だけを読み込み、2本目以降は初めて表示したタイミングで読み込む構成です。

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

各ファイルの役割
index.htmlはYouTube動画スライダーの構造を作るファイルです。左右の切り替えボタン、3本分の動画表示領域、3つのドットを配置しています。各動画はiframeを直接記述するのではなく、data-video-idへYouTube動画IDを設定します。配布コードではYOUR_VIDEO_ID_1からYOUR_VIDEO_ID_3を使用しているため、利用するYouTube動画のIDへ変更してください。

style.cssはスライダーの表示を整えるファイルです。左右のボタンと動画を横方向へ並べ、動画表示領域を16:9にしています。前後ボタンのサイズや色、SVG矢印、動画表示領域の角丸、ドットのサイズや間隔、640px以下の画面で使用するスマートフォン向け表示もこのファイルで設定します。

script.jsはYouTube動画の読み込みと切り替えを行うファイルです。現在表示している動画番号を管理し、左右のボタンまたはドットを操作すると対応する動画へ切り替えます。動画を初めて表示するときにdata-video-idから動画IDを取得してiframeを生成し、data-loaded="true"を設定します。一度生成したiframeは削除しないため、以前表示した動画へ戻った場合はiframeを新しく作り直さず、そのまま再表示します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。次にindex.htmlを開き、YOUR_VIDEO_ID_1、YOUR_VIDEO_ID_2、YOUR_VIDEO_ID_3を実際に表示するYouTube動画のIDへ変更してください。

YouTube動画IDは動画URLの動画を識別する部分です。たとえばhttps://www.youtube.com/watch?v=XXXXXXXXXXXというURLの場合、XXXXXXXXXXXの部分をdata-video-idへ設定します。動画ページのURL全体ではなく動画IDだけを入力します。

設定後にsample/index.htmlをブラウザで開きます。ページを開いた時点では1本目の動画だけiframeが生成されます。右ボタンまたは2つ目のドットから2本目へ移動すると、その時点で2本目のiframeが初めて生成されます。3本目も同じ仕組みです。一度読み込んだ動画は保持されるため、前後へ移動しても読み込み済みのiframeを再利用します。

カスタマイズできる内容
index.htmlでは表示するYouTube動画を変更できます。各data-video-idへ別の動画IDを設定すると、スライダーで表示する動画を差し替えられます。動画を増減する場合は.youtube-slider_itemと、それに対応する.youtube-slider_dotを同じ数になるように追加または削除します。

style.cssでは左右ボタンのサイズや色、SVG矢印の大きさと太さ、動画表示領域の角丸、ドットのサイズ・間隔・色などを変更できます。動画表示領域にはaspect-ratio:16 / 9;を設定しているため、横幅が変わっても16:9の比率を維持します。

script.jsでは動画を初めて表示したタイミングでiframeを生成します。data-loaded="true"になった動画は再生成しないため、この処理をそのまま使用する場合は、ページを開いた時点ですべてのYouTube動画を読み込む必要はありません。

数値調整
style.css

padding:40px 20px;
ページ全体の余白です。上下40px・左右20pxを指定しています。値を大きくすると画面端との間隔が広がり、小さくすると狭くなります。

gap:18px;
左ボタン・動画表示領域・右ボタンの間隔です。値を大きくするとボタンと動画が離れ、小さくすると近くなります。

48px
PC表示で使用する左右ボタンの横幅と高さです。flex:0 0 48px;、width:48px;、height:48px;で指定しています。値を大きくするとボタンが大きくなります。

24px
PC表示で使用するSVG矢印の横幅と高さです。値を大きくすると矢印が大きくなり、小さくすると小さくなります。

stroke-width:2;
SVG矢印の線の太さです。値を大きくすると矢印が太くなり、小さくすると細くなります。

aspect-ratio:16 / 9;
YouTube動画を表示する領域の縦横比です。YouTube動画に合わせて16:9にしています。横幅が変化すると、この比率を維持したまま高さも変化します。

border-radius:16px;
動画表示領域の角丸です。値を大きくすると丸みが強くなり、0にすると角丸のない表示になります。

padding:20px;
iframeが生成される前に表示する案内文の内側余白です。値を大きくすると文字と表示領域の端との間隔が広がります。

font-size:16px;
iframeが生成される前に表示する案内文の文字サイズです。値を大きくすると文字が大きくなります。

gap:10px;
ドット同士の間隔です。値を大きくするとドットの間隔が広がり、小さくすると狭くなります。

margin-top:24px;
動画表示部分とドットの間隔です。値を大きくするとドットが動画から離れ、小さくすると近くなります。

width:12px;・height:12px;
各ドットのサイズです。値を大きくするとドットが大きくなり、小さくすると小さくなります。

@media (max-width:640px)
スマートフォン向けの表示へ切り替える基準です。画面幅640px以下になると、ページ余白、ボタンと動画の間隔、ボタンサイズ、SVG矢印サイズを変更します。

padding:24px 12px;
640px以下で使用するページ全体の余白です。上下24px・左右12pxにして、PC表示より画面端の余白を小さくします。

gap:8px;
640px以下で使用するボタンと動画の間隔です。PC表示の18pxから8pxへ小さくし、動画を表示する横幅を確保します。

42px
640px以下で使用する左右ボタンのサイズです。PC表示の48pxより小さくしています。

22px
640px以下で使用するSVG矢印のサイズです。PC表示の24pxより小さくしています。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssの.youtube-slider_areaへwidth:100%;を設定し、.youtube-slider_viewにはflex:1;とmin-width:0;を指定しています。そのため、左右のボタンを除いた利用可能な横幅に合わせて動画表示領域が伸縮します。

動画表示領域にはaspect-ratio:16 / 9;を設定し、生成されるiframeにはwidth:100%;とheight:100%;を指定しているため、画面幅が変化しても16:9の動画表示を維持します。画面幅640px以下では左右の余白やボタンサイズを小さくし、スマートフォンでも動画表示領域を確保できる構成にしています。