如何让视频播放器只使用50%的屏幕高度？

<div class="video-container">
  <video src="video.mp4" controls></video>
</div>

<style>
.video-container {
  height: 50%;
}
</style>

<div class="video-container">
  <video src="video.mp4" controls></video>
</div>

<script>
const videoContainer = document.querySelector('.video-container');
const screenHeight = window.innerHeight;
const videoHeight = screenHeight * 0.5;
videoContainer.style.height = `${videoHeight}px`;
</script>