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

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

YouTube動画をドロワーメニューで表示する方法を紹介します。YouTube動画をページ内へ埋め込むことで、ページ遷移を行わずに動画コンテンツを閲覧できます。本記事では、HTML・CSS・JavaScriptだけを使い、ボタンをクリックすると画面左側からドロワーメニューが開き、その中でYouTube動画を再生できるサンプルを作成します。

サンプルコードでは、「動画を表示」ボタンをクリックするとドロワーメニューが表示され、その中へ埋め込んだYouTube動画を表示します。「閉じる」ボタンまたは背景部分をクリックするとドロワーメニューを閉じることができます。表示する動画はiframeのsrc属性にある動画IDを変更するだけで簡単に差し替えられます。

商品紹介動画やサービス紹介、操作マニュアル、チュートリアル動画、会社案内などを掲載したい企業サイトやECサイト、会員サイト、お問い合わせページなどで利用できます。HTMLでは動画や説明文を変更でき、CSSではドロワーメニューの幅や余白、動画サイズなどを自由に調整できます。シンプルな構成なので、自分のWebサイトへ組み込みやすいサンプルです。

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

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

デモ

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などすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでドロワーメニューやYouTube動画の表示エリアを作成し、CSSでレイアウトやデザイン、JavaScriptでドロワーメニューの開閉処理を行います。表示するYouTube動画は、ご自身で用意した動画へ自由に変更できます。

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

各ファイルの役割
index.html
ドロワーメニューやYouTube動画を表示するHTMLを記述します。iframeのsrcへYouTube動画の埋め込みURLを設定することで、表示する動画を変更できます。

style.css
ドロワーメニューの幅や背景色、ボタン、動画表示エリアのサイズ、余白、角丸、アニメーションなどの見た目を管理します。

script.js
ドロワーメニューの開閉処理を記述します。開くボタン・閉じるボタン・背景クリックによる閉じる動作を管理します。

設置方法・使い方
sampleフォルダ内へ各ファイルを配置し、index.htmlをブラウザで開くと利用できます。表示するYouTube動画はご自身で用意してください。

YouTube動画のURLが
https://www.youtube.com/watch?v=mj0vxJuMD0A
の場合、「mj0vxJuMD0A」が動画IDです。iframeのsrcへは通常の動画URLではなく、次のような埋め込みURLを設定してください。

カスタマイズできる内容
index.htmlでは表示するYouTube動画、タイトル、説明文、ボタンの文字を変更できます。style.cssではドロワーメニューの幅、高さ、背景色、余白、角丸、影、ボタンの色、動画表示サイズなどを自由に調整できます。script.jsでは開閉処理を編集し、ESCキー対応やアニメーション追加などへ発展させることもできます。

数値調整
style.cssの「width:420px;」を変更するとドロワーメニューの幅を調整できます。「aspect-ratio:16/9;」を変更すると動画表示エリアの比率を変更できます。「animation:youtube-drawer-menu_slide .35s ease forwards;」の「.35」は0.35秒を表し、値を大きくすると表示アニメーションがゆっくり、小さくすると速くなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssで「max-width:90%;」「width:100%;」「aspect-ratio」を使用しているため、スマートフォン・タブレット・PCでも画面幅に応じてドロワーメニューやYouTube動画が自動的に調整され、レイアウトが崩れにくくなっています。