【jQuery】YouTube・Vimeo動画をモーダル内で再生する方法

やりたいこと

サイト内にあるサムネイルをクリックすると、モーダルウィンドウが開き、YouTubeまたはVimeoの動画を再生させる仕組みを実装します。

準備

必要なライブラリ

jQueryをCDNで読み込みます。以下のコードをHTMLの</body>直前に記述してください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

実装方法

STEP1.レイアウトの実装

サムネイル、再生ボタンを画像で準備し、横並びにレイアウトしています。
※レイアウトのCSSは省略しています。

HTML

  <section class="section-movie section">
    <ul class="movie-list">
      <li class="movie-list-item">
        <a href="#" class="open-modal" data-video-id="aKXCkquWmoI">
          <img src="./images/movie_thumbnail.png" alt="" class="thumbnail-image">
          <div class="movie-overlay">
            <div class="movie-btn">
              <img src="./images/btn_play.png" alt="Play" class="play-icon">
            </div>
          </div>
        </a>
      </li>
      <li class="movie-list-item">
      <!--省略-->
      </li>
    </ul>
  </section>

 

 

HTML

<div id="videoModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <div class="video-container">
      <iframe id="MoviePlayer" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>

 

CSS

/* モーダル背景 */
.modal {
  display: none; /* 初期状態では非表示 */
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

/* モーダルコンテンツ */
.modal-content {
  position: relative;
  width: 90%;
  max-width: 960px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* 動画の埋め込みをレスポンシブ対応させる */
.video-container {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.video-container iframe {
  width: 100%;
  height: 100%;
}

/* 閉じるボタン */
.close {
  position: absolute;
  top: -4rem;
  right: 0;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
}

 

【CSS】アスペクト比の設定をaspect-ratioにアップデート画像や動画のアスペクト比（縦横比）を設定するaspect-ratioプロパティが、主要ブラウザでサポートされるようになったため、気兼ねな...

 JavaScript

const modal = document.getElementById("videoModal");
const closeBtn = document.querySelector(".close");
const MoviePlayer = document.getElementById("MoviePlayer");
const openModalBtns = document.querySelectorAll(".open-modal");

openModalBtns.forEach(button => {
  button.addEventListener("click", (event) => {
    event.preventDefault(); // ページがリロードしないようにデフォルト動作を制御
    const videoId = button.getAttribute("data-video-id"); // 動画IDを取得
    const videoUrl = `https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0`;
    MoviePlayer.src = videoUrl; // 動画をセット
    modal.style.display = "flex"; // モーダルを表示
  });
});

//ボタンをクリックしたら閉じる
closeBtn.addEventListener("click", () => {
  modal.style.display = "none";
});

//背景をクリックしたら閉じる
window.addEventListener("click", (event) => {
  if (event.target === modal) {
    modal.style.display = "none";
  }
});

 

このままだとモーダルを閉じても、動画が再生され続けるので、閉じる際にMoviePlayer.srcの値を空にして動画を停止させます。

//ボタンをクリックしたら閉じる
closeBtn.addEventListener("click", () => {
  modal.style.display = "none";
  MoviePlayer.src = ""; // 動画を停止する
});

//背景をクリックしたら閉じる
window.addEventListener("click", (event) => {
  if (event.target === modal) {
    modal.style.display = "none";
    MoviePlayer.src = ""; // 動画を停止する
  }
});

 

こちらで完成です！

Vimeoの場合

以下のようにURLの形式を切り替えるだけで対応できます。

const videoUrl = `https://player.vimeo.com/video/${videoId}?autoplay=1&title=0&byline=0&portrait=0`;

 

Vimeoのパラメーターについては、こちらを参考ください。

 

余談ですが、Vimeoを埋め込んだ時に、「プライバシー設定のため、この動画はここでは再生できません。」というエラーが出て慌てましたが、アップロード前のプライバシー設定が原因でした。

まとめ

jQueryとHTMLのdata属性を活用することで、複数の動画に対応し、動画IDの取得を実装することができました！
動画の追加や差し替えも、コードをコピペしてIDを変更するだけでOKです。

 

• WEB
• 技術情報