如何扩展视频框并使其居中悬停

<div class="video-container" id="video">
  <!-- 嵌入视频的代码 -->
</div>

.video-container {
  position: relative;
  width: 100%; /* 视频框的宽度 */
  padding-bottom: 56.25%; /* 按照16:9的比例设置高度，适应视频的宽高比 */
}

.video-container::after {
  content: "";
  display: block;
  padding-bottom: 0; /* 初始高度为0，即不扩展时的高度 */
}

.video-container:hover::after {
  padding-bottom: 56.25%; /* 悬停时，按照16:9的比例扩展高度 */
}

var videoContainer = document.getElementById("video");

videoContainer.addEventListener("mouseenter", function() {
  videoContainer.classList.add("hovered");
});

videoContainer.addEventListener("mouseleave", function() {
  videoContainer.classList.remove("hovered");
});