如何在DIV容器中制作动态高度的响应式视频背景？

<div class="video-container">
  <video id="background-video" autoplay loop muted>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
  <div class="content">
    <!-- 其他内容 -->
  </div>
</div>

.video-container {
  position: relative;
  width: 100%;
  min-height: 300px;
}

#background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  position: relative;
  z-index: 1;
  /* 其他样式 */
}

/* 媒体查询 */
@media screen and (max-width: 768px) {
  .video-container {
    min-height: 200px;
  }
}

window.addEventListener('resize', function() {
  var video = document.getElementById('background-video');
  video.style.height = video.offsetWidth * 9 / 16 + 'px';
});