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

モーダルウインドウ

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

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

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

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

コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
ご利用について
商用・個人利用を問わずご利用いただけますが、ご利用は自己責任でお願いいたします。

デモ

MP4動画プレーヤー モーダルデモ

ボタンを押すとモーダルウインドウが表示され、MP4動画を再生できます。

「動画プレーヤーを開く」をクリックするとモーダルウインドウが表示され、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>

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されており、ボタンをクリックするとMP4動画プレーヤーをモーダルウインドウ内へ表示できます。JavaScriptでモーダルの開閉を制御し、モーダルを閉じると動画の再生停止と再生位置のリセットも行います。

動画ファイルはmoveフォルダへ配置して利用します。HTMLでは画面構成、CSSではレイアウトやデザイン、JavaScriptではモーダルの表示・非表示と動画再生の制御を担当しているため、役割ごとに編集しやすい構成になっています。

サンプルをそのまま配置するだけで動作するため、動画紹介ページやポートフォリオ、商品紹介ページなどへ簡単に組み込めます。動画ファイルを差し替えるだけで他の動画にも利用できます。 

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

各ファイルの役割
index.html
モーダルウインドウ、動画プレーヤー、開閉ボタンを配置しています。表示するタイトルや説明文、動画ファイル名を変更できます。

style.css
モーダルウインドウ全体のデザインやレイアウトを設定しています。色・余白・角丸・影・ボタン・動画サイズなどの見た目を変更できます。

script.js
モーダルの表示・非表示を制御しています。閉じるボタンを押した際に動画を停止し、再生位置を先頭へ戻す処理も実装しています。

設置方法・使い方
sampleフォルダを任意の場所へ配置し、MP4動画ファイルをsample/move/へ保存してください。動画ファイル名を変更した場合は、index.html内のsourceタグのパスも同じ名前へ変更します。準備ができたらsample/index.htmlをブラウザで開き、「動画プレーヤーを開く」ボタンをクリックするとモーダルウインドウ内で動画を再生できます。

カスタマイズできる内容
index.htmlではタイトル・説明文・ボタンの文字・動画ファイルを変更できます。style.cssでは背景色・文字色・ボタンデザイン・モーダルサイズ・動画サイズ・余白・角丸・影などを自由に調整できます。動画を差し替える場合はmoveフォルダ内のMP4ファイルを変更するだけで利用できます。

数値調整
style.cssのmax-widthを変更するとモーダルや動画プレーヤーの横幅を調整できます。paddingを変更すると余白が変わり、border-radiusを変更すると角丸の大きさが変わります。transition:0.2s;はボタンのアニメーション時間を表しており、値を大きくするとゆっくり、小さくすると速く変化します。

レスポンシブ対応
style.cssではwidth:100%、max-width、@mediaを利用してレスポンシブ対応しています。画面サイズに応じてモーダルの余白や横幅を自動調整するため、スマートフォン・タブレット・PCで利用できます。

こちらもおすすめ

モーダルウインドウ
モーダルウインドウのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント