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

表示位置・メニュー項目・サイズ・色・余白・閉じ方などを設定して、HTML・CSS・JavaScriptを自動生成できます。

YouTube動画をドロワーメニューに表示する方法

YouTube動画をドロワーメニューに表示する方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用して、「動画を表示」ボタンをクリックすると画面左側からドロワーメニューが開き、その中にYouTube動画を表示します。通常時は動画を隠しておき、必要なときだけドロワーを開いて動画を確認できる構成です。

ドロワーメニュー内にはタイトル、説明文、YouTube動画、閉じるボタンを配置しています。動画を確認したあとは「閉じる」ボタン、またはドロワーメニューの外側に表示される背景部分をクリックすると閉じることができます。商品やサービスの紹介動画、会員サイトの操作説明、管理画面の使い方、Webサイトのチュートリアルなど、ページのメインコンテンツを大きく占有せずに動画を表示したい場面に利用できます。

HTMLではドロワーメニュー内のタイトルや説明文、YouTube動画の埋め込みURLを変更でき、CSSではドロワーの横幅、余白、背景色、角丸、ボタンのデザインやスライド表示を調整できます。ドロワーは最大幅を画面幅の90％に制限し、YouTube動画は16:9の比率で横幅に合わせて表示されるため、スマートフォン・タブレット・PCでも利用しやすい構成です。

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

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

デモ

YouTube動画をドロワーメニューで表示

ボタンをクリックすると、ドロワーメニュー内でYouTube動画を再生できます。

「動画を表示」をクリックすると、画面左側のドロワーメニュー内で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-drawer-menu_wrap">

    <!-- タイトル -->
    <h1 class="youtube-drawer-menu_title">
      YouTube動画をドロワーメニューで表示
    </h1>

    <!-- 説明文 -->
    <p class="youtube-drawer-menu_text">
      ボタンをクリックすると、ドロワーメニュー内でYouTube動画を再生できます。
    </p>

    <!-- ドロワーメニューを開くボタン -->
    <button
      class="youtube-drawer-menu_open"
      type="button"
      data-drawer-open>
      動画を表示
    </button>

  </div>

  <!-- ドロワーメニュー表示時の背景 -->
  <div
    class="youtube-drawer-menu_overlay"
    data-drawer-overlay>

    <!-- ドロワーメニュー本体 -->
    <div
      class="youtube-drawer-menu_drawer"
      role="dialog"
      aria-modal="true"
      aria-labelledby="youtube-drawer-menu-title">

      <!-- ドロワーメニューのタイトル -->
      <div
        class="youtube-drawer-menu_drawer-title"
        id="youtube-drawer-menu-title">
        YouTube動画
      </div>

      <!-- ドロワーメニューの説明文 -->
      <p class="youtube-drawer-menu_drawer-text">
        ドロワーメニュー内でYouTube動画を確認できます。
      </p>

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

        <!--
          YouTube動画

          src属性へ埋め込みURLを指定する。

          YouTube動画のURLが
          https://www.youtube.com/watch?v=xxxxxxxxxxx
          の場合は、

          https://youtube.com/watch?v=xxxxxxxxxxx

          の形式へ変更して設定する。
        -->
        <iframe
          src=""
          title="YouTube video"
          allowfullscreen>
        </iframe>

      </div>

      <!-- ドロワーメニューを閉じるボタン -->
      <button
        class="youtube-drawer-menu_close"
        type="button"
        data-drawer-close>
        閉じる
      </button>

    </div>

  </div>

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

</body>
</html>

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

/* デモ全体 */
.youtube-drawer-menu_wrap{
  max-width:700px; /* 最大横幅：変更するとデモ全体の幅が変わる */
  margin:40px auto; /* 上下余白・中央配置 */
  padding:32px; /* 内側余白 */
  border:1px solid #e5e7eb; /* 枠線 */
  border-radius:18px; /* 角丸 */
  background:#f8fafc; /* 背景色 */
  text-align:center; /* 中央揃え */
  box-sizing:border-box; /* paddingを幅に含める */
}

/* タイトル */
.youtube-drawer-menu_title{
  margin:0 0 12px; /* 下余白 */
  font-size:22px; /* 文字サイズ */
  font-weight:700; /* 太字 */
}

/* 説明文 */
.youtube-drawer-menu_text{
  margin:0 0 24px; /* 下余白 */
  color:#4b5563; /* 文字色 */
  line-height:1.8; /* 行間：値を大きくすると行間が広がる */
}

/* 動画を表示するボタン */
.youtube-drawer-menu_open{
  padding:12px 24px; /* 内側余白 */
  border:none; /* 枠線なし */
  border-radius:8px; /* 角丸 */
  background:#0b6bff; /* 背景色 */
  color:#ffffff; /* 文字色 */
  font-size:16px; /* 文字サイズ */
  font-weight:700; /* 太字 */
  cursor:pointer; /* マウスカーソル */
}

/* ドロワーメニュー表示時の背景 */
.youtube-drawer-menu_overlay{
  display:none; /* 初期状態は非表示 */
  position:fixed; /* 画面全体へ固定 */
  inset:0; /* 全画面表示 */
  z-index:9999; /* 最前面へ配置 */
  align-items:stretch; /* 高さを画面全体へ広げる */
  justify-content:flex-start; /* 左側へ配置 */
  background:rgba(0,0,0,.5); /* 背景の暗さ：.5を大きくすると濃くなる */
}

/* ドロワーメニュー表示時 */
.youtube-drawer-menu_overlay.is-active{
  display:flex; /* 背景とドロワーメニューを表示 */
}

/* ドロワーメニュー本体 */
.youtube-drawer-menu_drawer{
  width:420px; /* 横幅：変更するとドロワーメニューの幅が変わる */
  max-width:90%; /* 小さい画面で画面幅を超えないようにする */
  height:100%; /* 画面の高さに合わせる */
  padding:28px; /* 内側余白 */
  overflow-y:auto; /* 内容が多い場合に縦スクロール */
  background:#ffffff; /* 背景色 */
  box-sizing:border-box; /* paddingを幅に含める */
  box-shadow:10px 0 40px rgba(0,0,0,.2); /* 右側の影 */
  animation:youtube-drawer-menu_slide .35s ease forwards; /* 0.35秒で左側から表示。値を大きくするとゆっくり動く */
}

/* ドロワーメニューのタイトル */
.youtube-drawer-menu_drawer-title{
  margin:0 0 16px; /* 下余白 */
  font-size:22px; /* 文字サイズ */
  font-weight:700; /* 太字 */
}

/* ドロワーメニューの説明文 */
.youtube-drawer-menu_drawer-text{
  margin:0 0 20px; /* 下余白 */
  color:#4b5563; /* 文字色 */
  line-height:1.8; /* 行間 */
}

/* 動画表示エリア */
.youtube-drawer-menu_video{
  width:100%; /* 横幅いっぱい */
  aspect-ratio:16/9; /* 動画比率 */
  margin-bottom:24px; /* 下余白 */
}

/* YouTube動画 */
.youtube-drawer-menu_video iframe{
  display:block; /* 余分な隙間を防ぐ */
  width:100%; /* 横幅いっぱい */
  height:100%; /* 高さいっぱい */
  border:none; /* 枠線なし */
  border-radius:12px; /* 角丸 */
}

/* 閉じるボタン */
.youtube-drawer-menu_close{
  padding:10px 20px; /* 内側余白 */
  border:none; /* 枠線なし */
  border-radius:8px; /* 角丸 */
  background:#111827; /* 背景色 */
  color:#ffffff; /* 文字色 */
  font-size:15px; /* 文字サイズ */
  font-weight:700; /* 太字 */
  cursor:pointer; /* マウスカーソル */
}

/* 左側から表示するアニメーション */
@keyframes youtube-drawer-menu_slide{

  from{
    opacity:0;
    transform:translateX(-100%);
  }

  to{
    opacity:1;
    transform:translateX(0);
  }

}

// ドロワーメニューを開くボタンを取得
const drawerOpen=document.querySelector("[data-drawer-open]");

// ドロワーメニューを閉じるボタンを取得
const drawerClose=document.querySelector("[data-drawer-close]");

// ドロワーメニュー表示時の背景を取得
const drawerOverlay=document.querySelector("[data-drawer-overlay]");

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

  // ドロワーメニューを表示
  drawerOverlay.classList.add("is-active");

});

// 閉じるボタンをクリックした時
drawerClose.addEventListener("click",function(){

  // ドロワーメニューを非表示
  drawerOverlay.classList.remove("is-active");

});

// 背景をクリックした時
drawerOverlay.addEventListener("click",function(event){

  // ドロワーメニュー本体以外の背景がクリックされた場合
  if(event.target===drawerOverlay){

    // ドロワーメニューを非表示
    drawerOverlay.classList.remove("is-active");

  }

});

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

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

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではYouTube動画を表示するボタン、画面左側から開くドロワーメニュー、YouTube動画の埋め込みエリア、閉じるボタンを作成します。CSSではドロワーメニューの横幅や背景色、動画の表示サイズ、左側から表示するアニメーションなどを設定し、JavaScriptではドロワーメニューの開閉処理を行います。

YouTube動画はiframeを使用して表示するため、利用者自身で表示したいYouTube動画の埋め込みURLを用意する必要があります。YouTube Data APIなどは使用していないため、APIキーや外部ライブラリの設定は必要ありません。このサンプルでは動画を自動再生しない設定を基本としています。ドロワーメニューを開いたときに動画を自動再生したい場合は、YouTubeの埋め込みURLの末尾へ?autoplay=1を追加します。

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

各ファイルの役割
index.htmlはドロワーメニュー全体を構成するファイルです。「YouTube動画をドロワーメニューで表示」のタイトル、説明文、「動画を表示」ボタン、ドロワーメニュー内のタイトルや説明文、YouTube動画、閉じるボタンを配置しています。表示するYouTube動画の埋め込みURLも、このファイルのiframe要素に設定します。

style.cssはページ内の表示エリアとドロワーメニューのデザインを設定するファイルです。全体の横幅や余白、背景色、ボタン、ドロワーメニューの横幅、動画の表示比率、角丸、影、背景の暗さ、左側から表示するときのアニメーションなどを変更できます。

script.jsはドロワーメニューの開閉を制御するファイルです。「動画を表示」ボタンをクリックするとis-activeクラスを追加してドロワーメニューを表示し、「閉じる」ボタンまたはドロワーメニュー外側の背景をクリックするとis-activeクラスを削除して閉じます。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、3つのファイルを同じ階層へ保存します。index.htmlからstyle.cssとscript.jsを読み込む構成になっているため、ファイル名を変更しない場合はそのまま使用できます。

次に、表示したいYouTube動画を用意します。通常のYouTube動画URLがhttps://www.youtube.com/watch?v=xxxxxxxxxxxの場合、xxxxxxxxxxxの部分が動画IDです。index.html内のiframe要素のsrc=""へ、https://www.youtube.com/embed/xxxxxxxxxxxの形式で埋め込みURLを設定してください。

YouTubeの共有機能から埋め込みコードを取得する場合は、表示したい動画を開いて「共有」から「埋め込む」を選択し、表示されたiframeコードのsrc="..."に指定されているURLを使用できます。取得した埋め込みURLを、このサンプルのiframe要素のsrc属性へ設定します。

例えば動画IDがxxxxxxxxxxxの場合は、次のように設定します。

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

この状態では動画は自動再生されません。ドロワーメニューを開いたあと、利用者がYouTubeプレーヤーの再生ボタンをクリックして動画を再生します。

ドロワーメニューを開いたときに動画を自動再生する場合

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

src="https://www.youtube.com/embed/xxxxxxxxxxx?autoplay=1"

iframeのallow属性にもautoplayを含めます。

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

これにより、ブラウザ側で自動再生が許可されている場合は動画を自動再生できます。ただし、自動再生はブラウザの設定や自動再生ポリシーによって制限される場合があります。

設定後にsample/index.htmlをブラウザで開き、「動画を表示」をクリックすると画面左側からドロワーメニューが表示されます。「閉じる」ボタンまたはドロワーメニュー外側の背景をクリックすると閉じます。

カスタマイズできる内容
index.htmlではページ内のタイトルと説明文、「動画を表示」「閉じる」のボタン文字、ドロワーメニュー内のタイトルと説明文、YouTube動画の埋め込みURLを変更できます。別の動画を表示する場合は、iframe要素のsrc属性を表示したいYouTube動画の埋め込みURLへ変更します。自動再生したい場合は、埋め込みURLへ?autoplay=1を追加できます。

style.cssでは表示エリアの最大横幅、余白、背景色、角丸、各ボタンの色やサイズ、ドロワーメニューの横幅、内側余白、背景色、影、動画部分の角丸、背景オーバーレイの濃さ、ドロワーメニューが表示されるアニメーション時間などを変更できます。

数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。上下の40pxを大きくすると上下の余白が広がり、左右の20pxを大きくすると画面端との間隔が広がります。

max-width:700px;
ページ内に表示するサンプル全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

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

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

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

font-size:22px;
ページ内タイトルとドロワーメニュー内タイトルの文字サイズです。値を大きくすると文字が大きくなります。

margin:0 0 24px;
ページ内の説明文と「動画を表示」ボタンの間隔です。24pxを大きくすると間隔が広がります。

padding:12px 24px;
「動画を表示」ボタンの内側余白です。上下の12pxと左右の24pxを変更するとボタンの大きさが変わります。

border-radius:8px;
「動画を表示」ボタンと「閉じる」ボタンの角丸です。値を大きくすると丸みが強くなります。

background:rgba(0,0,0,.5);
ドロワーメニュー表示時に画面へ重なる背景の暗さです。.5を大きくすると背景が濃くなり、小さくすると薄くなります。

width:420px;
ドロワーメニューの横幅です。値を大きくするとドロワーメニューが横に広がり、小さくすると狭くなります。

max-width:90%;
画面幅が狭い場合のドロワーメニューの最大横幅です。画面幅に対して90％を上限として表示します。

padding:28px;
ドロワーメニュー内部の余白です。値を大きくすると内容とドロワー端の間隔が広がります。

box-shadow:10px 0 40px rgba(0,0,0,.2);
ドロワーメニュー右側に表示する影です。10pxは横方向の位置、40pxはぼかし範囲を表し、値を変更すると影の位置や広がりが変わります。

animation:youtube-drawer-menu_slide .35s ease forwards;
ドロワーメニューが左側から表示されるアニメーション時間です。.35sを大きくするとゆっくり表示され、小さくすると速く表示されます。

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

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

padding:10px 20px;
「閉じる」ボタンの内側余白です。上下の10pxと左右の20pxを変更するとボタンの大きさが変わります。

レスポンシブ対応
このサンプルは画面幅に応じてドロワーメニューが収まる構成です。style.cssのwidth:420px;とmax-width:90%;により、通常は420pxの横幅で表示し、画面幅が狭い場合は画面の90％を上限として縮小されます。YouTube動画はwidth:100%とaspect-ratio:16/9;を使用しているため、ドロワーメニューの横幅に合わせて16:9の比率を保ちながら表示されます。スマートフォン・タブレット・PCで利用できます。