在联合图库中，如何在单击模式框关闭按钮时停止视频

<div id="modal" class="modal">
  <video id="video" src="video.mp4"></video>
  <button id="closeBtn">关闭</button>
</div>

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.8);
  padding: 20px;
  border-radius: 5px;
  transition: opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.modal.show {
  opacity: 1;
  pointer-events: auto;
}

var modal = document.getElementById('modal');
var video = document.getElementById('video');
var closeBtn = document.getElementById('closeBtn');

closeBtn.addEventListener('click', function() {
  video.pause(); // 停止视频播放
  modal.classList.remove('show'); // 隐藏模式框
});

// 显示模式框和播放视频的函数
function showModal() {
  modal.classList.add('show');
  video.play();
}

var thumbnail = document.getElementById('thumbnail');

thumbnail.addEventListener('click', function() {
  showModal();
});