MP4動画プレーヤーをモーダルウインドウで表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

テキスト・表示ボタン・サイズ・余白・角丸・背景色・文字色・影などを設定して、HTML・CSS・JavaScriptを自動生成できます。

MP4動画プレーヤーをモーダルウインドウで表示する方法

MP4動画プレーヤーをモーダルウインドウで表示する方法を紹介します。ボタンをクリックするとモーダルウインドウが開き、その中でMP4動画を再生できるシンプルなサンプルです。動画ページへの遷移を行わず、その場で動画を再生できるため、使いやすい動画閲覧機能を簡単に実装できます。

動画ファイルはmoveフォルダへ配置するだけで利用でき、HTML・CSS・JavaScriptだけで動作します。モーダルは右上の「×」ボタンで閉じることができ、閉じると同時に動画の再生も停止して先頭へ戻るため、次回も最初から再生できます。

商品紹介ページ、ギャラリー、ポートフォリオ、企業サイト、サービス紹介ページなど、ページを移動せずに動画を見せたい場面で活用できます。シンプルな構成なのでデザイン変更や動画の差し替えも行いやすく、自分のサイトに合わせて自由にカスタマイズできます。

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

ご利用について
商用・個人利用を問わずご利用いただけますが、ご利用は自己責任でお願いいたします。

デモ

「動画プレーヤーを開く」をクリックするとモーダルウインドウが表示され、MP4動画を再生できます。デモではサンプル動画が再生されますので、音量にご注意ください。モーダルは右上の「×」ボタンでのみ閉じることができ、閉じると動画も停止します。

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

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン表示対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>MP4動画プレーヤーをモーダルウインドウで表示する方法</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- MP4動画モーダルを開く操作エリア -->
  <div class="mp4-modal-video-player_wrap">

    <!-- 操作エリアのタイトル -->
    <div class="mp4-modal-video-player_title">
      MP4動画プレーヤー
    </div>

    <!-- 操作エリアの説明文 -->
    <p class="mp4-modal-video-player_text">
      ボタンをクリックすると、モーダルウインドウ内にMP4動画プレーヤーを表示できます。
    </p>

    <!-- MP4ファイルについての注意書き -->
    <p class="mp4-modal-video-player_notice">
      このサンプルにはMP4ファイルは含まれていません。再生するMP4ファイルを用意し、moveフォルダへ配置してご利用ください。
    </p>

    <!-- モーダルを開くボタン -->
    <button
      class="mp4-modal-video-player_open"
      type="button"
      data-mp4-modal-video-player-open>
      動画プレーヤーを開く
    </button>

  </div>

  <!-- モーダル背景 -->
  <div
    class="mp4-modal-video-player_overlay"
    data-mp4-modal-video-player-overlay
    aria-hidden="true">

    <!-- モーダル本体 -->
    <div
      class="mp4-modal-video-player_modal"
      role="dialog"
      aria-modal="true"
      aria-labelledby="mp4-modal-video-player-heading">

      <!-- モーダル上部 -->
      <div class="mp4-modal-video-player_header">

        <!-- モーダルタイトル -->
        <div
          class="mp4-modal-video-player_heading"
          id="mp4-modal-video-player-heading">
          MP4動画プレーヤー
        </div>

        <!-- モーダルを閉じるボタン -->
        <button
          class="mp4-modal-video-player_close"
          type="button"
          data-mp4-modal-video-player-close
          aria-label="モーダルを閉じる">
          ×
        </button>

      </div>

      <!-- MP4動画プレーヤー -->
      <video
        class="mp4-modal-video-player_video"
        data-mp4-modal-video-player-video
        controls
        preload="metadata">

        <!--
          再生するMP4ファイル

          moveフォルダ内へsample.mp4を配置する。
          別のファイル名を使用する場合は、src属性を書き換える。

          例
          src="move/movie.mp4"
        -->
        <source
          src="move/sample.mp4"
          type="video/mp4">

        お使いのブラウザはvideoタグに対応していません。

      </video>

    </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; /* ページ全体のフォント */
  box-sizing:border-box; /* paddingと枠線を要素サイズに含める */
}

/* MP4動画モーダルを開く操作エリア */
.mp4-modal-video-player_wrap{
  max-width:700px; /* 最大横幅。値を大きくすると操作エリアが広がる */
  margin:40px auto; /* 上下40pxの余白と左右中央配置 */
  padding:32px; /* 内側余白。値を大きくすると内容周囲の余白が広がる */
  border:1px solid #e5e7eb; /* 枠線の太さと色 */
  border-radius:18px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 操作エリアの背景色 */
  text-align:center; /* タイトル・説明文・ボタンを中央揃え */
  box-sizing:border-box; /* paddingと枠線を横幅に含める */
}

/* 操作エリアのタイトル */
.mp4-modal-video-player_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* 文字サイズ。値を大きくするとタイトルが大きくなる */
  font-weight:700; /* 文字の太さ */
  line-height:1.5; /* 行間。値を大きくすると行間が広がる */
}

/* 操作エリアの説明文 */
.mp4-modal-video-player_text{
  margin:0 0 18px; /* 下側18pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 行間。値を大きくすると行間が広がる */
}

/* MP4ファイルについての注意書き */
.mp4-modal-video-player_notice{
  margin:0 0 24px; /* 下側24pxの余白 */
  padding:14px 16px; /* 内側余白。値を大きくすると文章周囲の余白が広がる */
  border:1px solid #bfdbfe; /* 枠線の太さと色 */
  border-radius:10px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#eff6ff; /* 注意書きの背景色 */
  color:#1e3a8a; /* 注意書きの文字色 */
  font-size:14px; /* 注意書きの文字サイズ */
  line-height:1.8; /* 行間。値を大きくすると行間が広がる */
  text-align:left; /* 注意書きを左揃え */
}

/* モーダルを開くボタン */
.mp4-modal-video-player_open{
  min-height:48px; /* タップしやすい最小高さ */
  padding:12px 24px; /* ボタン内側の上下・左右余白。値を大きくするとボタンが大きくなる */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:8px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
  background:#0b6bff; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字の太さ */
  line-height:1.5; /* ボタン文字の行間 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
  transition:background .2s ease; /* 0.2秒で背景色を変化。値を大きくすると変化が遅くなる */
}

/* モーダルを開くボタンのホバー状態 */
.mp4-modal-video-player_open:hover{
  background:#0958d9; /* ホバー時の背景色 */
}

/* モーダル背景 */
.mp4-modal-video-player_overlay{
  display:none; /* 初期状態ではモーダルを非表示 */
  position:fixed; /* モーダル背景を画面全体へ固定 */
  inset:0; /* 上下左右を0にして画面全体へ広げる */
  z-index:9999; /* 他の要素より前面へ表示 */
  align-items:center; /* モーダル本体を縦中央へ配置 */
  justify-content:center; /* モーダル本体を横中央へ配置 */
  padding:20px; /* 画面端との余白。値を大きくすると端との間隔が広がる */
  background:rgba(0,0,0,.65); /* 背景色。最後の.65を大きくすると暗く、小さくすると薄くなる */
  box-sizing:border-box; /* paddingを画面幅に含める */
}

/* モーダル表示状態 */
.mp4-modal-video-player_overlay.is-active{
  display:flex; /* 表示用クラスが付いた時にモーダルを表示 */
}

/* モーダル本体 */
.mp4-modal-video-player_modal{
  width:100%; /* 画面幅に合わせて縮小 */
  max-width:900px; /* 最大横幅。値を大きくするとモーダルが広がる */
  overflow:hidden; /* 角丸の外側へ動画がはみ出すのを防ぐ */
  border-radius:18px; /* モーダル本体の角丸 */
  background:#ffffff; /* モーダル本体の背景色 */
  box-shadow:0 24px 60px rgba(0,0,0,.3); /* モーダルの影。数値を大きくすると影が広がる */
  box-sizing:border-box; /* 枠線と余白を横幅に含める */
  animation:mp4-modal-video-player-show .3s ease forwards; /* 0.3秒で表示。値を大きくすると遅く、小さくすると速くなる */
}

/* モーダル上部 */
.mp4-modal-video-player_header{
  display:flex; /* タイトルと閉じるボタンを横並び */
  align-items:center; /* 垂直方向中央揃え */
  justify-content:space-between; /* タイトルと閉じるボタンを両端へ配置 */
  gap:16px; /* タイトルと閉じるボタンの間隔 */
  padding:16px 20px; /* 上下16px・左右20pxの内側余白 */
  background:#ffffff; /* モーダル上部の背景色 */
  box-sizing:border-box; /* paddingを横幅に含める */
}

/* モーダルタイトル */
.mp4-modal-video-player_heading{
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトル文字の太さ */
  line-height:1.5; /* タイトルの行間 */
}

/* モーダルを閉じるボタン */
.mp4-modal-video-player_close{
  flex-shrink:0; /* ボタンの縮小を防ぐ */
  width:40px; /* ボタンの横幅。値を大きくするとボタンが大きくなる */
  height:40px; /* ボタンの高さ。値を大きくするとボタンが大きくなる */
  padding:0; /* ボタン内側の余白をなくす */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:50%; /* 円形にする */
  background:#e2e8f0; /* ボタンの背景色 */
  color:#0f172a; /* ×印の文字色 */
  font-size:24px; /* ×印の文字サイズ */
  line-height:1; /* ×印の行間を詰める */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
  transition:background .2s ease; /* 0.2秒で背景色を変化。値を大きくすると変化が遅くなる */
}

/* モーダルを閉じるボタンのホバー状態 */
.mp4-modal-video-player_close:hover{
  background:#cbd5e1; /* ホバー時の背景色 */
}

/* MP4動画プレーヤー */
.mp4-modal-video-player_video{
  display:block; /* 動画下の不要な余白をなくす */
  width:100%; /* モーダルの横幅いっぱいに広げる */
  height:auto; /* 動画の縦横比を維持する */
  max-height:70vh; /* 画面高の70%を最大高さにする */
  background:#000000; /* 動画読み込み前の背景色 */
  object-fit:contain; /* 動画全体が収まるように表示する */
}

/* モーダル表示アニメーション */
@keyframes mp4-modal-video-player-show{

  /* アニメーション開始時 */
  from{
    opacity:0; /* 完全に透明な状態から開始 */
    transform:scale(.92); /* 92%の大きさから開始。値を小さくすると拡大幅が大きくなる */
  }

  /* アニメーション終了時 */
  to{
    opacity:1; /* 完全に表示 */
    transform:scale(1); /* 通常サイズへ拡大 */
  }

}

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

  /* スマートフォン用のページ全体 */
  body{
    padding:24px 12px; /* 上下24px・左右12pxへページ余白を縮小 */
  }

  /* スマートフォン用の操作エリア */
  .mp4-modal-video-player_wrap{
    margin:24px auto; /* 上下の余白を24pxへ縮小 */
    padding:24px 18px; /* 上下24px・左右18pxへ内側余白を縮小 */
  }

  /* スマートフォン用の操作エリアタイトル */
  .mp4-modal-video-player_title{
    font-size:20px; /* 小さい画面でタイトルを縮小 */
  }

  /* スマートフォン用の開くボタン */
  .mp4-modal-video-player_open{
    width:100%; /* ボタンを操作エリアの横幅いっぱいに広げる */
  }

  /* スマートフォン用のモーダル上部 */
  .mp4-modal-video-player_header{
    padding:14px 16px; /* 上下14px・左右16pxへ余白を縮小 */
  }

  /* スマートフォン用のモーダルタイトル */
  .mp4-modal-video-player_heading{
    font-size:19px; /* 小さい画面でタイトルを縮小 */
  }

}

// モーダルを開くボタンを取得
const mp4ModalVideoPlayerOpen=document.querySelector(
  "[data-mp4-modal-video-player-open]"
);

// モーダルを閉じるボタンを取得
const mp4ModalVideoPlayerClose=document.querySelector(
  "[data-mp4-modal-video-player-close]"
);

// モーダル背景を取得
const mp4ModalVideoPlayerOverlay=document.querySelector(
  "[data-mp4-modal-video-player-overlay]"
);

// MP4動画プレーヤーを取得
const mp4ModalVideoPlayerVideo=document.querySelector(
  "[data-mp4-modal-video-player-video]"
);

// モーダルを開くボタンをクリックした時
mp4ModalVideoPlayerOpen.addEventListener("click",function(){

  // モーダル背景へ表示用クラスを追加
  mp4ModalVideoPlayerOverlay.classList.add("is-active");

  // モーダルが表示中であることを支援技術へ伝える
  mp4ModalVideoPlayerOverlay.setAttribute("aria-hidden","false");

});

// ×ボタンをクリックした時だけモーダルを閉じる
mp4ModalVideoPlayerClose.addEventListener("click",function(){

  // 再生中のMP4動画を停止
  mp4ModalVideoPlayerVideo.pause();

  // 動画の再生位置を先頭へ戻す
  mp4ModalVideoPlayerVideo.currentTime=0;

  // モーダル背景から表示用クラスを削除
  mp4ModalVideoPlayerOverlay.classList.remove("is-active");

  // モーダルが非表示であることを支援技術へ伝える
  mp4ModalVideoPlayerOverlay.setAttribute("aria-hidden","true");

});

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

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

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

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではモーダルを開くボタン、モーダル本体、MP4動画プレーヤーを配置し、CSSでは操作エリア、モーダル背景、モーダル本体、動画プレーヤーなどのデザインを設定します。JavaScriptではモーダルの表示・非表示を切り替え、モーダルを閉じたときに再生中のMP4動画を停止して再生位置を先頭へ戻します。再生するMP4ファイルはZIPには含まれていないため、利用者自身で用意してmoveフォルダへ配置します。

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

各ファイルの役割
index.htmlはMP4動画プレーヤー付きモーダルウインドウを構成するファイルです。操作エリアのタイトル、説明文、注意書き、開くボタン、モーダルタイトル、閉じるボタン、video要素を配置しています。video要素内のsrc="move/sample.mp4"で、利用者自身が用意するMP4ファイルを読み込みます。

style.cssは操作エリア、モーダル背景、モーダル本体、開くボタン、閉じるボタン、MP4動画プレーヤーのデザインを設定するファイルです。横幅、余白、背景色、文字色、角丸、影、動画の最大高さなどを変更できます。モーダル表示時には、拡大しながら表示するアニメーションも設定しています。

script.jsはモーダルの開閉とMP4動画の停止処理を行うファイルです。「動画プレーヤーを開く」ボタンをクリックするとis-activeクラスを追加してモーダルを表示します。「×」ボタンをクリックすると動画を停止し、再生位置を先頭へ戻してからis-activeクラスを削除してモーダルを非表示にします。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。MP4ファイルはZIPに含まれていないため、sampleフォルダ内にmoveフォルダを作成し、利用者自身で用意したMP4ファイルをsample.mp4というファイル名で配置してください。配置後はsample/move/sample.mp4となります。別のファイル名を使用する場合は、index.htmlの<source src="move/sample.mp4" type="video/mp4">にあるmove/sample.mp4を、実際に配置したMP4ファイルのパスへ変更します。

準備ができたらsample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssとscript.jsが読み込まれます。「動画プレーヤーを開く」をクリックするとモーダルウインドウが表示され、video要素の再生ボタンからMP4動画を再生できます。モーダル右上の「×」ボタンをクリックすると、再生中の動画が停止し、再生位置が先頭へ戻ってからモーダルが閉じます。

カスタマイズできる内容
index.htmlでは「MP4動画プレーヤー」のタイトル、説明文、注意書き、開くボタンの文字、モーダルタイトル、再生するMP4ファイルのパスを変更できます。別のMP4ファイルを使用する場合は、video要素内のsrc="move/sample.mp4"を実際のファイル名や配置先に合わせて変更してください。

style.cssでは操作エリアやモーダル本体の横幅、余白、背景色、文字色、角丸、影、ボタンのサイズや色、動画の最大高さを変更できます。モーダル背景のbackground:rgba(0,0,0,.65);では背景の暗さを調整でき、モーダル本体のanimation:mp4-modal-video-player-show .3s ease forwards;では表示アニメーションの速さを変更できます。

数値調整
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 18px;
説明文の下側余白です。18pxを大きくすると注意書きとの間隔が広がり、小さくすると狭くなります。

padding:14px 16px;
MP4ファイルについての注意書きの内側余白です。14pxが上下、16pxが左右の余白です。値を大きくすると文章と枠線の間隔が広がります。

margin:0 0 24px;
注意書きの下側余白です。24pxを大きくすると開くボタンとの間隔が広がり、小さくすると狭くなります。

min-height:48px;
「動画プレーヤーを開く」ボタンの最小高さです。値を大きくするとボタンの最低限の高さが大きくなります。

padding:12px 24px;
「動画プレーヤーを開く」ボタンの内側余白です。12pxが上下、24pxが左右の余白で、値を大きくするとボタンが大きくなります。

transition:background .2s ease;
開くボタンと閉じるボタンの背景色が切り替わる時間です。.2sは0.2秒を表します。値を大きくするとゆっくり、小さくすると速く変化します。

padding:20px;
モーダル背景の内側余白です。値を大きくすると画面端とモーダル本体の間隔が広がり、小さくすると狭くなります。

background:rgba(0,0,0,.65);
モーダル表示中の背景色と透明度です。.65を大きくすると背景が濃くなり、小さくすると薄くなります。

max-width:900px;
モーダル本体の最大横幅です。値を大きくするとモーダルが横に広がり、小さくするとコンパクトになります。

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

box-shadow:0 24px 60px rgba(0,0,0,.3);
モーダル本体の影です。24pxや60pxを大きくすると影の位置や広がりが大きくなり、小さくすると控えめになります。

animation:mp4-modal-video-player-show .3s ease forwards;
モーダルを表示するときのアニメーション時間です。.3sは0.3秒を表します。値を大きくするとゆっくり表示され、小さくすると速く表示されます。

gap:16px;
モーダルタイトルと「×」ボタンの間隔です。値を大きくすると要素同士の間隔が広がります。

padding:16px 20px;
モーダル上部の内側余白です。16pxが上下、20pxが左右の余白で、値を大きくするとタイトルや閉じるボタンとモーダル端の間隔が広がります。

width:40px;・height:40px;
モーダル右上にある「×」ボタンの横幅と高さです。両方を同じ値にすると、border-radius:50%;によって円形を維持できます。値を大きくするとボタン全体が大きくなります。

font-size:24px;
「×」の文字サイズです。値を大きくすると「×」が大きくなり、小さくすると小さくなります。

max-height:70vh;
MP4動画プレーヤーの最大高さです。70vhは画面高さの70%を上限にする指定です。値を大きくすると動画をより高く表示でき、小さくすると画面内で占める高さを抑えられます。

transform:scale(.92);
モーダル表示アニメーション開始時の大きさです。.92は通常サイズの92%を表します。値を小さくすると表示開始時のサイズが小さくなり、拡大する動きが大きくなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのモーダル本体にwidth:100%とmax-width:900pxを設定し、MP4動画プレーヤーにはwidth:100%、height:auto、max-height:70vhを設定しています。そのため、モーダルと動画が画面幅に合わせて縮小され、動画の縦横比を維持しながら表示できます。

640px以下ではメディアクエリを適用し、bodyの余白をpadding:24px 12px;、操作エリアをmargin:24px auto;とpadding:24px 18px;へ変更します。操作エリアのタイトルは20px、モーダルタイトルは19pxへ縮小し、「動画プレーヤーを開く」ボタンはwidth:100%で操作エリアの横幅いっぱいに表示します。モーダル上部もpadding:14px 16px;へ変更するため、スマートフォン・タブレット・PCの画面幅に合わせて利用できます。